Features Listicle

What it does

FeaturesListicle renders a vertical tab list on the left. Clicking a tab reveals a description, a short bullet list, and optional provider logo badges on the right. Use it to walk visitors through your key features one at a time.

Usage

import FeaturesListicle from "@/components/FeaturesListicle";

<FeaturesListicle />

Customizing

Open src/components/FeaturesListicle.tsx. The defaultFeatures array at the top of the file controls everything. Each entry looks like this:

{
  name: "Payments",
  description: "A sentence or two describing this feature and its value.",
  bullets: [
    "Stripe checkout and customer portal",
    "Lemon Squeezy checkout and portal",
    "Webhook-ready purchase lifecycle",
  ],
  icon: <svg>...</svg>,
  providerSeparator: "or",
  providers: [
    {
      name: "Stripe",
      href: "https://stripe.com",
      iconSrc: "/stripe.svg",
      iconAlt: "Stripe logo",
    },
  ],
},

• name — the tab label.
• description — shown in the right panel. Two to three sentences work best.
• bullets — short feature highlights shown as a list below the description.
• icon — inline SVG displayed in the tab. Swap in any icon you prefer.
• providers — optional logos shown at the bottom of the panel. Remove the key entirely to hide them.