Icon Badge Pills Row

Features

About

A centered row of inline feature pills with icons and labels, ideal for highlighting key benefits or feature lists.

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

Code

How Icon Badge Pills Row is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { Feature152 } from "@/components/ui/feature152";
import { Clock, Globe, Shield, Zap } from "lucide-react";

export default function Feature152Demo() {
  return (
    <Feature152
      badge={{ label: "Features", variant: "default" }}
      heading="Built for speed"
      description="Key features that make us different."
      items={[
        { icon: <Zap className="size-4" />, label: "Lightning Fast" },
        { icon: <Shield className="size-4" />, label: "Secure" },
        { icon: <Globe className="size-4" />, label: "Global CDN" },
        { icon: <Clock className="size-4" />, label: "24/7 Support" },
      ]}
    />
  );
}