Builders Community Hero

Component 507

About

ommunity hero section with animated-style orbit visuals, member avatars, social activity badges, key metrics, and category pills.

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

Code

How Builders Community Hero is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Briefcase, GraduationCap, Presentation, Code2, MessageSquareText } from 'lucide-react';
import CommunityOrbit, { type OrbitItem, type OrbitStat, type OrbitTag } from '@/components/ui/builders-community-hero';

const memoji = (n: number) => `https://raw.githubusercontent.com/alohe/memojis/main/png/memo_${n}.png`;

function ThreadAvatar() {
  return (
    <span className="flex h-[22px] w-[22px] items-center justify-center overflow-hidden rounded-full bg-[#dfe6f5]">
      <img
        src={memoji(33)}
        alt=""
        draggable={false}
        className="h-full w-full translate-y-[8%] scale-[1.1] object-cover object-top"
      />
    </span>
  );
}

const items: OrbitItem[] = [
  // Anneau extérieur, de gauche à droite.
  { kind: 'status', ring: 'outer', angle: 132, label: 'Release shipped' },
  { kind: 'card', ring: 'outer', angle: 112.6, emoji: '🚀', badge: 12 },
  { kind: 'pill', ring: 'outer', angle: 90, icon: <ThreadAvatar />, label: '8 New Threads' },
  { kind: 'pill', ring: 'outer', angle: 67.6, icon: '⭐', label: '240' },
  { kind: 'avatar', ring: 'outer', angle: 50.9, src: memoji(9), alt: 'Community member', color: '#c4bceb' },
  { kind: 'pill', ring: 'outer', angle: 35.2, icon: <MessageSquareText size={13} strokeWidth={2} />, label: '36' },
  // Anneau intérieur, de gauche à droite.
  { kind: 'avatar', ring: 'inner', angle: 137.2, src: memoji(19), alt: 'Community member', color: '#ffdcb6' },
  { kind: 'pill', ring: 'inner', angle: 116.6, icon: '🔥', label: '18' },
  { kind: 'avatar', ring: 'inner', angle: 90, src: memoji(35), alt: 'Community member', color: '#c0cef3', size: 48 },
  { kind: 'card', ring: 'inner', angle: 63.3, emoji: '📦' },
  { kind: 'check', ring: 'inner', angle: 41.8 },
];

const stats: OrbitStat[] = [
  { value: '12K+', label: 'Members' },
  { value: '340+', label: 'Projects' },
  { value: '2.5M+', label: 'Downloads' },
];

const tags: OrbitTag[] = [
  { icon: <Code2 strokeWidth={2} />, label: 'Open source', href: '#' },
  { icon: <Presentation strokeWidth={2} />, label: 'Weekly demos', href: '#' },
  { icon: <GraduationCap strokeWidth={2} />, label: 'Mentorship', href: '#' },
  { icon: <Briefcase strokeWidth={2} />, label: 'Job board', href: '#' },
];

export default function CommunityOrbitDemo() {
  return (
    <div className="w-full">
      <CommunityOrbit
        items={items}
        stats={stats}
        headline={
          <>
            Where Builders Ship
            <br className="hidden sm:block" /> Together
          </>
        }
        tags={tags}
      />
    </div>
  );
}