Feature Bar

Cards 2

About

Feature Bar A responsive and animated component that elegantly displays a list of key features or statistics. It's perfect for course summaries, product highlights, or service benefits.

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

Code

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

Usage.tsx

// demo.tsx

import { Star } from "lucide-react";
import { FeatureBar } from "@/components/ui/feature-bar"; // Adjust the import path accordingly

// Define the data to be passed to the component
const courseFeatures = [
  {
    title: "4 course series",
    subtitle: "Get in-depth knowledge of a subject",
  },
  {
    title: "4.8",
    subtitle: "(3,968 reviews)",
    icon: <Star className="h-4 w-4 text-yellow-500 fill-yellow-500" />,
  },
  {
    title: "Beginner level",
    subtitle: "Recommended experience",
  },
  {
    title: "4 hours to complete",
  },
  {
    title: "Flexible schedule",
    subtitle: "Learn at your own pace",
  },
];

export default function FeatureBarDemo() {
  return (
    <div className="w-full p-4 md:p-8">
      <FeatureBar items={courseFeatures} />
    </div>
  );
}