# Three Pillars

> Three equal columns, each with an icon, heading, and a line on quality, security, and support. Builds buyer confidence across the full storefront.

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-three-pillars).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-ui-blocks/ecommerce-ecommerce-trust-guarantee-three-pillars
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-ui-blocks/ecommerce-ecommerce-trust-guarantee-three-pillars-light-96b0d36cdd78f992.png
- Registry item: https://www.shadcn-ui-blocks.com/r/ecommerce-ecommerce-trust-guarantee-three-pillars.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-three-pillars.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/three-pillars.tsx`

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

export default function TrustGuaranteeThreePillars() {
  const trustPillars = [
    {
      icon: Truck,
      title: "Fast Shipping",
      description:
        "Free shipping on orders over $50. Most orders ship within 24 hours.",
    },
    {
      icon: RotateCcw,
      title: "No-Risk Returns",
      description:
        "30-day hassle-free returns. Love it or your money back, guaranteed.",
    },
    {
      icon: Headphones,
      title: "Top-Rated Support",
      description:
        "Award-winning customer service. We're here to help 7 days a week.",
    },
  ];

  return (
    <section className="w-full px-4 py-8 md:py-12">
      <div className="container mx-auto">
        <div className="grid grid-cols-1 gap-8 md:grid-cols-3 md:gap-6">
          {trustPillars.map((pillar, index) => {
            const IconComponent = pillar.icon;
            return (
              <div
                key={index}
                className="flex flex-col items-center space-y-4 text-center"
              >
                <div className="bg-primary/10 flex h-16 w-16 items-center justify-center rounded-full">
                  <IconComponent className="text-primary h-8 w-8" />
                </div>
                <div className="space-y-2">
                  <h3 className="text-foreground text-lg font-semibold">
                    {pillar.title}
                  </h3>
                  <p className="text-muted-foreground max-w-xs text-sm leading-relaxed">
                    {pillar.description}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
```