Feature Showcase

featurefrom Community Creative

Live

AI Usage Rules

Use FeatureShowcase for product feature grids. Display 3 or 6 features for balanced layouts. Each feature needs an icon (use Lucide icons), title (3-4 words), and description (1-2 sentences). The hover effect adds a subtle gradient overlay.

Code Template

interface Feature {
  icon: React.ReactNode
  title: string
  description: string
}

interface FeatureShowcaseProps {
  title: string
  subtitle: string
  features: Feature[]
}

export function FeatureShowcase({ title, subtitle, features }: FeatureShowcaseProps) {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-7xl px-6">
        <div className="text-center">
          <h2 className="text-3xl font-bold text-white sm:text-4xl">{title}</h2>
          <p className="mt-4 text-lg text-gray-400">{subtitle}</p>
        </div>
        <div className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {features.map((feature) => (
            <div key={feature.title} className="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-8 transition-all duration-300 hover:border-white/20 hover:bg-white/[0.07]">
              <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/0 to-purple-500/0 transition-all duration-500 group-hover:from-indigo-500/5 group-hover:to-purple-500/5" />
              <div className="relative z-10">
                <div className="mb-5 inline-flex rounded-xl bg-indigo-500/10 p-3 text-indigo-400 ring-1 ring-indigo-500/20">
                  {feature.icon}
                </div>
                <h3 className="text-lg font-semibold text-white">{feature.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-gray-400">{feature.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

Props Schema

Property	Type	Default
title	string	—
features	array	—
subtitle	string	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "title": {
      "type": "string"
    },
    "features": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "icon": {
            "type": "string"
          },
          "title": {
            "type": "string"
          },
          "description": {
            "type": "string"
          }
        }
      }
    },
    "subtitle": {
      "type": "string"
    }
  }
}