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

@alice

Full-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
AJ

Alice Johnson

Senior Frontend Engineer

Engineering

Passionate about building accessible, beautiful user interfaces.

React
TypeScript
Design Systems
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."    />  );}

Theme Submission Form

Form for submitting a community theme with name, colors, and preview.

Preview

Submit a Community Theme

Create and submit a custom color theme for the LaunchApp design system

Unique identifier (lowercase, numbers, hyphens only)

Author Information

Theme Metadata

Comma-separated keywords for categorization

Theme Submission Form.tsx
import { ThemeSubmissionForm } from "@launchapp/design-system/blocks/community";export default function Page() {  return (    <ThemeSubmissionForm      onSubmit={(data) => console.log("submit", data)}    />  );}

User Profile Header

Profile header with cover image, avatar, bio, stats, and follow/action buttons.

Preview
AJ

Alice Johnson

@alice_j

Engineering Lead

Building great products at the intersection of design and engineering. Open source enthusiast.

San Francisco, CAalicejohnson.devJoined January 2022
24
Projects
1.2k
Followers
89
Following
User Profile Header.tsx
import { UserProfileHeader } from "@launchapp/design-system/blocks/profile";export default function Page() {  return (    <UserProfileHeader      user={{        name: "Alice Johnson",        username: "alice",        role: "Senior Frontend Engineer",        bio: "Passionate about building accessible, beautiful user interfaces.",        location: "San Francisco, CA",        website: "alice.dev",        joinedDate: "January 2023",        isVerified: true,        initials: "AJ",      }}      stats={[        { label: "Projects", value: 42 },        { label: "Followers", value: 1280 },        { label: "Following", value: 96 },      ]}      onFollow={() => console.log("follow")}    />  );}

Profile Card

Compact profile card with social links, tags, and edit/message actions.

Preview
AJ

Alice Johnson

Senior Frontend Engineer

alice@example.com
San Francisco, CA

Passionate about building accessible, beautiful user interfaces. Open source contributor and design systems enthusiast.

React
TypeScript
Design Systems
a11y
WebsiteTwitterGitHubLinkedIn
Profile Card.tsx
import { UserProfileCard } from "@launchapp/design-system/blocks/profile";export default function Page() {  return (    <UserProfileCard      name="Alice Johnson"      role="Senior Frontend Engineer"      email="alice@example.com"      bio="Passionate about building accessible, beautiful user interfaces. Open source contributor and design systems enthusiast."      location="San Francisco, CA"      website="https://alice.dev"      tags={["React", "TypeScript", "Design Systems", "a11y"]}      socialLinks={[        { platform: "twitter", url: "https://twitter.com/alice", label: "Twitter" },        { platform: "github", url: "https://github.com/alice", label: "GitHub" },        { platform: "linkedin", url: "https://linkedin.com/in/alice", label: "LinkedIn" },      ]}      onMessage={() => console.log("message")}      onEdit={() => console.log("edit")}    />  );}
← PreviousBlog
Next →Error Pages