Icon Bar

Buttons 244

About

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

Code

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

Usage.tsx

"use client";

import { Building2, Cloud, GraduationCap, Sun } from "lucide-react";
import { IconBar, IconBarItem } from "@/components/ui/icon-bar";

export function IconBarPreview() {
  return (
    <IconBar>
      <IconBarItem icon={Building2} label="Office" />
      <IconBarItem icon={GraduationCap} label="School" />
      <IconBarItem icon={Sun} label="Sunny" />
      <IconBarItem icon={Cloud} label="Cloudy" />
    </IconBar>
  );
}

export default IconBarPreview