Community Hub Card

Cards 52

About

Community Hub Card This card provides a centralized view of a community's key information, including member stats, an invite system, book progress, and an upcoming reading list.

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

Code

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

Usage.tsx

import { CommunityHubCard } from '@/components/ui/community-hub-card';

// Mock data to populate the component
const communityData = {
  title: 'Readers Unite',
  subtitle: 'Your gateway to literary adventures',
  memberCount: 1234,
  members: [
    { src: 'https://cdn.21st.dev/assets/mirror/f0/f02fed36023656a5b5df6f247c83c96c53bfa9db5b98085cdee93ffc938a5f37.jpg', alt: 'Member 1', fallback: 'M1' },
    { src: 'https://cdn.21st.dev/assets/mirror/5b/5b5b2f3487692d40f629010ea6448d150907f780d8c262c4ca194b7386115c2d.jpg', alt: 'Member 2', fallback: 'M2' },
    { src: 'https://cdn.21st.dev/assets/mirror/10/10e2bfa5446e5c116e269b649b5f5e0106d96643f0a903048f3a056e40c35cd8.jpg', alt: 'Member 3', fallback: 'M3' },
    { src: 'https://cdn.21st.dev/assets/mirror/fa/fae47bb0faba45d1e0696b6557ca36c551a738c7d6e3950e82bb69dd2f963a72.jpg', alt: 'Member 4', fallback: 'M4' },
  ],
  inviteLink: 'https://readersunite.com/invite/Bk7LA3G',
  currentBook: {
    title: 'The Great Gatsby',
    progress: 65,
  },
  upcomingBooks: [
    { title: 'To Kill a Mockingbird', author: 'Harper Lee' },
    { title: '1984', author: 'George Orwell' },
    { title: 'Pride and Prejudice', author: 'Jane Austen' },
  ],
};

/**
 * A demo page to showcase the CommunityHubCard component.
 * It passes mock data to the component to render a realistic preview.
 */
export default function CommunityHubCardDemo() {
  return (
    <div className="flex items-center justify-center bg-background p-4 md:p-8 min-h-screen">
      <CommunityHubCard
        title={communityData.title}
        subtitle={communityData.subtitle}
        memberCount={communityData.memberCount}
        members={communityData.members}
        inviteLink={communityData.inviteLink}
        currentBook={communityData.currentBook}
        upcomingBooks={communityData.upcomingBooks}
      />
    </div>
  );
}