# Incentives 1 - Icon row of shopping incentives

> A four-item incentive row with circular icons, titles, and short support copy that scrolls as a carousel on small screens and becomes a grid on larger ones.

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

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

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/incentives1.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`
- Registry items: `carousel`

## Files

### `block/incentives1/incentives1.tsx`

```tsx
import type { LucideIcon } from "lucide-react";
import { Gift, Headphones, RefreshCw, ShieldCheck } from "lucide-react";
import { cn } from "cn";

import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
type incentive = {
  title: string;
  icon: LucideIcon;
  text: string;
  id: string;
};

interface Incentives1Props {
  incentives: incentive[];
  className?: string;
}

const INCENTIVES: incentive[] = [
  {
    id: "1",
    title: "Tech Assistance",
    text: "Mon - Sun, 24h support",
    icon: Headphones,
  },
  {
    id: "2",
    title: "Quick Exchanges",
    text: "Returns processed within 60 days",
    icon: RefreshCw,
  },
  {
    id: "3",
    title: "Premium Wrapping",
    text: "Free wrapping over $100",
    icon: Gift,
  },
  {
    id: "4",
    title: "Product Guarantee",
    text: "Zero hassle warranty",
    icon: ShieldCheck,
  },
];

const Incentives1 = ({
  incentives = INCENTIVES,
  className,
}: Incentives1Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <Carousel
          opts={{
            breakpoints: {
              "(min-width: 768px)": {
                active: false,
              },
            },
            align: "start",
          }}
        >
          <CarouselContent className="md:ml-0 md:grid md:grid-cols-[repeat(2,_minmax(12.5rem,_18.75rem))] md:justify-center md:gap-5 xl:grid-cols-[repeat(4,_minmax(12.5rem,_18.75rem))]">
            {incentives.map(({ title, icon: Icon, text, id }) => (
              <CarouselItem key={id} className="basis-75 md:pl-0">
                <div className="flex items-center gap-6">
                  <div className="shrink-0 basis-16">
                    <div className="flex size-16 place-content-center place-items-center rounded-full border">
                      <Icon className="w-10" />
                    </div>
                  </div>
                  <div className="flex-1 space-y-1">
                    <h3 className="text-base font-semibold">{title}</h3>
                    <p className="text-sm">{text}</p>
                  </div>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
      </div>
    </section>
  );
};

export { Incentives1 };
```