# Feature Cards Grid

> Three feature cards with icons, hover effects, and glassmorphism styling (Base UI)

A shadcn/ui block from the [@uitripled](https://ui.tripled.work) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uitripled/feature-cards-block-baseui).

- Page, with a live preview: https://shadcn.exchange/r/uitripled/feature-cards-block-baseui
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uitripled/feature-cards-block-baseui-light-d4af6a141764771c.png
- Registry item: https://ui.tripled.work/r/feature-cards-block-baseui.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.tripled.work/r/feature-cards-block-baseui.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: `framer-motion`, `react`
- Registry items: `button`

## Files

### `@uitripled/react-baseui/src/components/sections/feature-cards-block-baseui.tsx`

```tsx
"use client";

import { Shield, Sparkles, Zap } from "lucide-react";

export function FeatureCardsBlockBaseui() {
  const features = [
    {
      icon: Zap,
      title: "Lightning Fast",
      description:
        "Built for speed with optimized performance and instant loading times.",
    },
    {
      icon: Shield,
      title: "Secure by Default",
      description:
        "Enterprise-grade security with built-in protection and compliance.",
    },
    {
      icon: Sparkles,
      title: "Beautiful Design",
      description: "Pixel-perfect interfaces that users love to interact with.",
    },
  ];

  return (
    <section className="px-6 py-32">
      <div className="mx-auto max-w-7xl">
        <div className="mb-20 space-y-5 text-center">
          <h2 className="text-5xl font-bold tracking-tight md:text-6xl">
            Everything you need
          </h2>
          <p className="mx-auto max-w-2xl text-lg leading-relaxed text-muted-foreground md:text-xl">
            Powerful features that help you build better products faster
          </p>
        </div>

        <div className="grid gap-8 md:grid-cols-3">
          {features.map((feature, index) => (
            <div
              key={index}
              className="group cursor-pointer rounded-lg border border-border/50 bg-background/50 p-10 text-card-foreground backdrop-blur-xl transition-all duration-500 hover:border-border"
            >
              <div className="mb-8 flex h-14 w-14 items-center justify-center rounded-2xl bg-foreground/[0.04] transition-all duration-300 group-hover:scale-110 group-hover:bg-foreground/[0.08]">
                <feature.icon className="h-6 w-6" />
              </div>
              <h3 className="mb-4 text-2xl font-semibold tracking-tight">
                {feature.title}
              </h3>
              <p className="text-base leading-relaxed text-muted-foreground">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
```