Feature Grid

Grid of feature cards with icons, titles, and descriptions.

Preview

Everything you need to ship fast

Blocks designed to look polished on day one and stay flexible as you scale.

Copy-paste ready

Every block ships as a self-contained React component.

Themeable tokens

Swap the entire look with a single palette change.

Production layouts

Real marketing patterns you can drop into any product page.

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/feature-grid.json

Usage

feature-grid-demo.tsx
import { Check, Sparkles, Zap } from "lucide-react"

import FeatureGrid from "@/components/blocks/feature-grid"

export default function FeatureGridDemo() {
  return (
    <FeatureGrid
      // Customize the section headline and copy.
      title="Everything you need to ship fast"
      description="Blocks designed to look polished on day one and stay flexible as you scale."
      // Each feature needs a title, description, and icon.
      features={[
        {
          title: "Copy-paste ready",
          description: "Every block ships as a self-contained React component.",
          icon: <Sparkles className="size-5" />,
        },
        {
          title: "Themeable tokens",
          description: "Swap the entire look with a single palette change.",
          icon: <Zap className="size-5" />,
        },
        {
          title: "Production layouts",
          description: "Real marketing patterns you can drop into any product page.",
          icon: <Check className="size-5" />,
        },
      ]}
    />
  )
}
0