Feature Highlight

Text 197

About

Feature Highlight Component This component animates a list of features, a title, and an icon into view with a staggered effect. It's built to be highly reusable—you can pass any text, icons, or custom elements as props.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Feature Highlight to your project and fits it to your theme.

Code

How Feature Highlight is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { CheckCircle2 } from "lucide-react";
import { FeatureHighlight } from "@/components/ui/feature-highlight"; // Adjust the import path

// Helper component for inline icons to manage styling
const InlineIcon = ({ src, alt }: { src: string; alt: string }) => (
  <img
    src={src}
    alt={alt}
    className="mx-1 inline-block h-6 w-6 align-middle"
  />
);

export default function FeatureHighlightDemo() {
  // Define the features as an array of React nodes
  const features = [
    <>
      Grab
      <InlineIcon
        src="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-Et8V2nihjdbUDvyBTTUuuGOgXG91gh.png&w=320&q=75"
        alt="Coffee"
      />
      from the corner cafe.
    </>,
    <>
      Load up your
      <InlineIcon
        src="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-UsyTZyMk2er8VfZu1T68Z4BbnfHYL1.png&w=320&q=75"
        alt="Laptop"
      />
      app.
    </>,
    <>
      Order a new
      <InlineIcon
        src="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-53doFZDyMbmChPPHfnbbPjt0Zvlzq7.png&w=320&q=75"
        alt="Backpack"
      />
      online.
    </>,
    <>
      Have
      <InlineIcon
        src="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-yqO1RPHoOjuNAvqMy997ClCPIwICsb.png&w=320&q=75"
        alt="Gift"
      />
      delivered.
    </>,
    <>
      Subscribe to
      <InlineIcon
        src="https://cdn.21st.dev/assets/mirror/e5/e5760a5905212729055e1379a6ebb05f8a4e6f74695a64d7038830ce8c101670.png"
        alt="Music"
      />
      . Get
      <InlineIcon
        src="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-7A67shmAxn3I6JFLINSfPdOc1q6LzB.png&w=320&q=75"
        alt="Chocolate"
      />
    </>,
    <>from a vending machine.</>,
    <>
      And
      <InlineIcon
        src="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-frBicIvOqd2UwplkxPdk4hRXZZUI5N.png&w=320&q=75"
        alt="Broccoli"
      />
      from the supermarket.
    </>,
  ];

  // Define the footer content
  const footer = (
    <p className="pt-2 text-2xl text-muted-foreground">
      Just look for
      <InlineIcon
        src="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-wmzJ7uOEXwk7xqF9Qkmp7mkvLuwRO5.png&w=320&q=75"
        alt="Apple Pay"
      />
      or
      <InlineIcon
        src="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-k0pw2n6xstEEWMtDne6kYddw1cfAsG.png&w=320&q=75"
        alt="NFC"
      />
      when you check out.
    </p>
  );
  
  return (
    <div className="flex h-full w-full items-center justify-center rounded-lg bg-background p-4">
      <FeatureHighlight
        icon={
          <CheckCircle2 className="h-10 w-10 rounded-full bg-blue-500 p-1 text-white" />
        }
        title="Easy. Does it all."
        features={features}
        footer={footer}
      />
    </div>
  );
}