# Checklist

> A vertical checklist of product promises with check icons and short labels. Use it on a product page to spell out exactly what every order includes.

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-checklist).

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

```tsx
import { Check } from "lucide-react";

export default function TrustGuaranteeChecklist() {
  const trustItems = [
    {
      title: "Money-Back Guarantee",
      description: "30-day hassle-free returns",
    },
    {
      title: "Verified Payments",
      description: "SSL encrypted & secure checkout",
    },
    {
      title: "Easy Returns",
      description: "Free return shipping included",
    },
    {
      title: "Fast Shipping",
      description: "Free delivery on orders over $50",
    },
    {
      title: "Secure Transactions",
      description: "Protected by industry standards",
    },
    {
      title: "24/7 Support",
      description: "Always here to help you",
    },
  ];

  return (
    <div className="px-4 py-8 md:py-12">
      <div className="mx-auto max-w-4xl">
        <div className="mb-8 text-center">
          <h2 className="mb-2 text-2xl font-bold md:text-3xl">
            Shop with Confidence
          </h2>
          <p className="text-muted-foreground">
            Your satisfaction is our guarantee
          </p>
        </div>

        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6">
          {trustItems.map((item, index) => {
            return (
              <div
                key={index}
                className="bg-card flex items-start gap-3 rounded-lg border p-4"
              >
                <div className="bg-primary mt-0.5 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full">
                  <Check className="text-primary-foreground h-4 w-4" />
                </div>
                <div className="flex flex-1 items-start gap-3">
                  <div className="min-w-0 flex-1">
                    <h3 className="text-sm leading-tight font-semibold md:text-base">
                      {item.title}
                    </h3>
                    <p className="text-muted-foreground mt-1 text-sm leading-relaxed">
                      {item.description}
                    </p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        <div className="mt-8 text-center">
          <p className="text-muted-foreground text-sm">
            Questions about our policies?{" "}
            <span className="text-primary cursor-pointer font-medium hover:underline">
              Contact our support team
            </span>
          </p>
        </div>
      </div>
    </div>
  );
}
```