# Feature 02 - Three Columns Feature with Icons

> A clean three card feature grid with icons and concise copy, built for product or SaaS pages to communicate core benefits clearly while maintaining a developer friendly, scalable layout.

A shadcn/ui block from the [@shadcn-space](https://shadcnspace.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-space/feature-02).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-space/feature-02
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-space/feature-02-light-6aa16e9fda82046f.png
- Registry item: https://shadcnspace.com/r/feature-02.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnspace.com/r/feature-02.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`, `motion`
- Registry items: `card`, `badge`, `button`

## Files

### `src/components/shadcn-space/blocks/feature-02/page.tsx`

```tsx
import Feature02 from "@/components/shadcn-space/blocks/feature-02/index"

const page = () => {
  return (
    <Feature02/>
  )
}

export default page
```

### `src/components/shadcn-space/blocks/feature-02/index.tsx`

```tsx
"use client";
import Feature from "@/components/shadcn-space/blocks/feature-02/feature";
import {
    Box,
    CirclePlay,
    CodeXml,
} from "lucide-react"

const featureData = [
    {
      icon: Box,
      title: "Streamline your international payroll.",
      content: "Launch faster with modular tools that automate workflows, centralize data, and scale securely, helping teams build, deploy, and manage products.",
    },
    {
      icon: CirclePlay,
      title: "Easily track your spend and growth analytics.",
      content: "Power your business with real-time analytics, seamless integrations, and cloud-ready architecture designed to reduce costs, boost productivity.",
    },
    {
      icon: CodeXml,
      title: "Build better products in half the time.",
      content: "All-in-one SaaS platform offering automation, collaboration, and performance monitoring so growing teams can optimize operations.",
    }
];

const Feature02 = () => {
  return (
    <>
      <Feature featureData={featureData} />
    </>
  );
};

export default Feature02;
```

### `src/components/shadcn-space/blocks/feature-02/feature.tsx`

```tsx
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Asterisk, LucideIcon } from "lucide-react";
import { motion } from "motion/react";

type Features = {
  icon: LucideIcon;
  title: string;
  content: string;
}[];

const Feature = ({ featureData }: { featureData: Features }) => {
  return (
    <section>
      <div className="lg:py-20 sm:py-16 py-8">
        <div className="mx-auto max-w-7xl px-4 sm:px-8">
          <div className="flex flex-col gap-8 md:gap-16">
            <motion.div
              initial={{ y: -10, opacity: 0 }}
              whileInView={{ y: 0, opacity: 1 }}
              viewport={{ once: true }}
              transition={{
                duration: 0.8,
                ease: [0.21, 0.47, 0.32, 0.98],
              }}
              className="flex flex-col items-center justify-center gap-4 max-w-lg mx-auto"
            >
              <Badge variant={"outline"} className="px-3 py-1 h-auto text-sm">
                Features
              </Badge>
              <h1 className="text-3xl md:text-4xl font-semibold text-center tracking-[-1px]">
                Designed for Developer Flow Helping them to Get Started
              </h1>
            </motion.div>
            <motion.div
              variants={{
                hidden: { opacity: 0 },
                show: {
                  opacity: 1,
                  transition: {
                    staggerChildren: 0.1,
                  },
                },
              }}
              initial="hidden"
              whileInView="show"
              viewport={{ once: true }}
              className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"
            >
              {featureData.map((value, index) => {
                return (
                  <motion.div
                    key={index}
                    variants={{
                      hidden: { opacity: 0, y: 30, filter: "blur(4px)" },
                      show: { opacity: 1, y: 0, filter: "blur(0px)" },
                    }}
                    transition={{
                      duration: 0.8,
                      ease: [0.21, 0.47, 0.32, 0.98],
                    }}
                  >
                    <Card className="py-10 h-full border-t-4 border-t-transparent transition-all duration-300 hover:border-t-primary hover:shadow-lg">
                      <CardContent className="px-8 flex flex-col gap-6">
                        <value.icon
                          className="w-8 h-8 text-primary"
                          strokeWidth={1.2}
                        />
                        <div className="flex flex-col gap-3">
                          <h6 className="text-xl font-semibold">
                            {value.title}
                          </h6>
                          <p className="text-base font-normal text-muted-foreground">
                            {value.content}
                          </p>
                        </div>
                      </CardContent>
                    </Card>
                  </motion.div>
                );
              })}
            </motion.div>
            <motion.div
              initial={{ y: 20, opacity: 0 }}
              whileInView={{ y: 0, opacity: 1 }}
              viewport={{ once: true }}
              transition={{
                duration: 0.8,
                ease: [0.21, 0.47, 0.32, 0.98],
              }}
              className="flex flex-col items-center justify-center gap-5"
            >
              <div className="flex items-center gap-2 text-muted-foreground">
                <Asterisk size={16} />
                <p className="font-normal text-sm">
                  Launch faster with modular designs by Shadcn Space now
                </p>
              </div>
              <Button className="rounded-full px-5 py-2.5 shadow-xs h-full cursor-pointer">
                <a href="#">Browse more block</a>
              </Button>
            </motion.div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Feature;
```