Project Badge

Cards 37

About

Here is modern project badge component

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

Code

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

Usage.tsx

// demo.tsx
'use client';

import * as React from 'react';
import { GitBranch, Star, Zap } from 'lucide-react';
import ProjectBadge, { projects } from '@/components/ui/project-badge';

const ProjectBadgeDemo = () => {
   return (
      <div className="flex w-full flex-col items-center justify-center gap-10 p-4">
         <div className="flex flex-col items-center gap-2 text-center">
            <h2 className="text-lg font-semibold">Project Badges</h2>
            <p className="text-sm text-muted-foreground">
               Clickable badges to represent different projects.
            </p>
         </div>

         <div className="flex flex-wrap items-center justify-center gap-4">
            {projects.map((project) => (
               <ProjectBadge key={project.id} project={project} href="#" />
            ))}
         </div>

         <div className="w-full max-w-lg space-y-4">
            <h3 className="text-center font-medium text-muted-foreground">Example Usage in a List</h3>
            <ul className="divide-y divide-border rounded-lg border">
               <li className="flex items-center justify-between p-4">
                  <div className="flex items-center gap-3">
                     <Zap className="size-5 text-yellow-500" />
                     <span className="font-medium">Design new landing page</span>
                  </div>
                  <ProjectBadge project={projects[0]} href="#" />
               </li>
               <li className="flex items-center justify-between p-4">
                  <div className="flex items-center gap-3">
                     <GitBranch className="size-5 text-blue-500" />
                     <span className="font-medium">Refactor state management</span>
                  </div>
                  <ProjectBadge project={projects[2]} href="#" />
               </li>
               <li className="flex items-center justify-between p-4">
                  <div className="flex items-center gap-3">
                     <Star className="size-5 text-green-500" />
                     <span className="font-medium">Write API documentation</span>
                  </div>
                  <ProjectBadge project={projects[1]} href="#" />
               </li>
            </ul>
         </div>
      </div>
   );
};

export { ProjectBadgeDemo as DemoOne };