Community
User profiles, team member cards, theme galleries, and community forms.
User Profile Card
Profile card with avatar, bio, stats, and action buttons.
Preview
AJ
Alice Johnson
@aliceFull-stack developer passionate about great UX.
San Francisco, CA
42
Posts
128
Followers
64
Following
User Profile Card.tsx
import { UserProfileCard } from "@launchapp/design-system/blocks/community";export default function Page() { return ( <UserProfileCard user={{ name: "Alice Johnson", username: "alice", bio: "Full-stack developer." }} stats={[{ label: "Posts", value: 42 }, { label: "Followers", value: 128 }]} /> );}Team Member Card
Card displaying a team member's avatar, role, and social links.
Preview
No preview available
See the code snippet below for usage.
Team Member Card.tsx
import { TeamMemberCard } from "@launchapp/design-system/blocks/community";export default function Page() { return ( <TeamMemberCard name="Alice Johnson" role="Engineering Lead" bio="Builds fast, ships faster." /> );}Community Themes Gallery
Grid gallery of community-submitted themes with preview and like actions.
Preview
No preview available
See the code snippet below for usage.
Community Themes Gallery.tsx
import { CommunityThemesGallery } from "@launchapp/design-system/blocks/community";const themes = [ { id: "1", name: "Midnight Blue", author: "Alice", likes: 42, previewColors: ["#0f172a", "#1e40af", "#3b82f6"] }, { id: "2", name: "Forest Green", author: "Bob", likes: 28, previewColors: ["#14532d", "#16a34a", "#4ade80"] },];export default function Page() { return <CommunityThemesGallery themes={themes} onLike={(id) => console.log("like", id)} />;}Theme Submission Form
Form for submitting a community theme with name, colors, and preview.
Preview
No preview available
See the code snippet below for usage.
Theme Submission Form.tsx
import { ThemeSubmissionForm } from "@launchapp/design-system/blocks/community";export default function Page() { return ( <ThemeSubmissionForm onSubmit={(data) => console.log("submit", data)} /> );}