# Badge Row

> A horizontal row of trust badges showing secure payment, returns, and warranty icons. Place under an add to cart button to calm buyer worry.

A shadcn/ui block from the [@shadcn-ui-blocks](https://www.shadcn-ui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-ui-blocks/ecommerce-ecommerce-trust-guarantee-badge-row).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-ui-blocks/ecommerce-ecommerce-trust-guarantee-badge-row
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-ui-blocks/ecommerce-ecommerce-trust-guarantee-badge-row-light-296353056b45f6a7.png
- Registry item: https://www.shadcn-ui-blocks.com/r/ecommerce-ecommerce-trust-guarantee-badge-row.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.shadcn-ui-blocks.com/r/ecommerce-ecommerce-trust-guarantee-badge-row.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`

## Files

### `components/blocks/ecommerce/ecommerce-trust-guarantee/badge-row.tsx`

```tsx
import { Shield, Lock, RotateCcw, Truck } from "lucide-react";

export default function TrustGuaranteeBadgeRow() {
  const badges = [
    {
      icon: Shield,
      label: "30-Day Guarantee",
      description: "Risk-free returns",
    },
    {
      icon: Lock,
      label: "Secure Checkout",
      description: "SSL encrypted",
    },
    {
      icon: RotateCcw,
      label: "Free Returns",
      description: "No questions asked",
    },
    {
      icon: Truck,
      label: "Fast Shipping",
      description: "2-3 business days",
    },
  ];

  return (
    <div className="px-4 py-8 md:py-12">
      <div className="container mx-auto">
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-6 lg:grid-cols-4">
          {badges.map((badge, index) => {
            const IconComponent = badge.icon;
            return (
              <div
                key={index}
                className="bg-muted/30 hover:bg-muted/50 flex flex-col items-center rounded-lg p-4 text-center transition-colors"
              >
                <div className="bg-primary/10 mb-3 flex h-12 w-12 items-center justify-center rounded-full">
                  <IconComponent className="text-primary h-6 w-6" />
                </div>
                <h3 className="mb-1 text-sm font-semibold">{badge.label}</h3>
                <p className="text-muted-foreground text-xs">
                  {badge.description}
                </p>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}
```