Blocks
Profile Card Block
A social profile card combining Avatar, Badge, Button, AvatarGroup, Tooltip, and RoughLine.
GL
Grace Liu
@graceliu
Design Engineer
Designing systems that feel playful without losing the sharp edges needed for production.
1420
Followers
318
Following
Mutual followers
AC
BM
CD
DP
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/profile-card.jsonProps
PropTypeDefaultDescription
avatarFallbackstring—
Fallback initials for the avatar.
avatarSrcstring—
Avatar image URL.
biostring—
Profile bio text.
followersnumber—
Follower count.
followingnumber—
Following count.
messageLabelstring—
Textarea label.
mutualFollowersMutualFollower[]—
Avatars rendered in the mutual followers group.
mutualFollowersLabelstring—
Label above the avatar group.
namestring—
Display name.
onFollow(following: boolean) => void—
Callback fired when follow is clicked.
onMessage() => void—
Callback fired when message is clicked.
rolestring—
Role badge text.
usernamestring—
Secondary handle text.
Accessibility
This block is composed from accessible byDefaultHuman components. Preserve visible labels, button text, and supporting copy when adapting it so the layout remains understandable without the visual styling.
Examples
import { ProfileCardBlock } from "@/components/block/ProfileCardBlock";
<ProfileCardBlock />;