# Trust Strip 1 - Icon grid of store guarantees

> A four-column strip of trust items, each with an icon, title, and short description covering shipping, returns, payment, and ratings.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/trust-strip1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/trust-strip1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/trust-strip1-light-c1985c5aac718dae.png
- Registry item: https://shadcnblocks.com/r/trust-strip1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/trust-strip1.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: `cn`, `lucide-react`

## Files

### `block/trust-strip1/trust-strip1.tsx`

```tsx
import { RotateCcw, Shield, Star, Truck } from "lucide-react";
import React from "react";
import { cn } from "cn";

interface TrustItem {
  icon: React.ReactNode;
  title: string;
  description?: string;
}

interface TrustStrip1Props {
  items?: TrustItem[];
  className?: string;
}

const DEFAULT_ITEMS: TrustItem[] = [
  {
    icon: <Truck className="size-5" />,
    title: "Free Shipping",
    description: "On orders over $50",
  },
  {
    icon: <RotateCcw className="size-5" />,
    title: "Easy Returns",
    description: "30-day return policy",
  },
  {
    icon: <Shield className="size-5" />,
    title: "Secure Payment",
    description: "100% protected",
  },
  {
    icon: <Star className="size-5" />,
    title: "4.9/5 Rating",
    description: "From 10,000+ reviews",
  },
];

const TrustStrip1 = ({
  items = DEFAULT_ITEMS,
  className,
}: TrustStrip1Props) => {
  return (
    <section className={cn("border-y bg-muted/30 py-6", className)}>
      <div className="container">
        <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
          {items.map((item, index) => (
            <div key={index} className="flex items-center gap-3">
              <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
                {item.icon}
              </div>
              <div>
                <p className="leading-tight font-medium">{item.title}</p>
                {item.description && (
                  <p className="text-sm text-muted-foreground">
                    {item.description}
                  </p>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { TrustStrip1 };
```