Gumtree UI

UserCard

Displays a user profile with avatar, name, username handle, and optional bio.

Import

import { UserCard } from "@gumtree/ui/forge/UserCard";

Props

PropTypeDefaultDescription
username*string-Username (displayed as @handle)
fullNamestring-Display name. Falls back to username.
avatarUrlstring-URL for the user's avatar image
biostring-Short biography text
hrefstring-Link URL. Defaults to /{username}

Examples

With Avatar

A user card with a profile image and bio.

Alice Johnson

@alice

Full-stack developer and open source enthusiast.

<UserCard
  username="alice"
  fullName="Alice Johnson"
  avatarUrl="https://api.dicebear.com/9.x/thumbs/svg?seed=Alice"
  bio="Full-stack developer and open source enthusiast."
/>

Without Avatar

When no avatar URL is provided, a placeholder with initials is shown.

BO
Bob Smith

@bob

Backend engineer.

<UserCard
  username="bob"
  fullName="Bob Smith"
  bio="Backend engineer."
/>

Minimal

A user card with just a username.

CH
charlie

@charlie

<UserCard username="charlie" />