Compositions
Profile Card
Avatar, name, short bio, stats and follow and message buttons.
The second card has no photo: the avatar falls back to the initials, on a hue taken from the name. Its follow button is in the “Following” state.
Installation
npx axiom add profile-cardpnpm dlx axiom add profile-cardyarn dlx axiom add profile-cardbun x axiom add profile-cardAlso copies: card, avatar, separator, button, title, text and their dependencies. The file lands in components/compositions/profile-card.tsx. It brings no tokens of its own.
Usage
The card doesn’t keep the follow state. Hold it in the screen and flip following in onFollow:
import { useState } from "react";
import { ProfileCard } from "@/components/compositions/profile-card";
const [following, setFollowing] = useState(user.isFollowed);
<ProfileCard
name={user.name}
handle={`@${user.username}`}
avatar={{ uri: user.avatarUrl }}
bio={user.bio}
stats={[
{ value: "248", label: "Posts" },
{ value: "12.4k", label: "Followers" },
{ value: "310", label: "Following" },
]}
following={following}
onFollow={() => setFollowing((value) => !value)}
onMessage={() => router.push(`/messages/${user.id}`)}
onPress={() => router.push(`/users/${user.id}`)}
/>;Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Shown as the title. Gives the avatar its initials and hue when there is no photo. |
handle | string | — | Under the name, muted: "@lena.m". |
avatar | ImageSourcePropType | — | The photo, in an xl Avatar. The initials show while it loads or if it fails. |
bio | string | — | Centered, up to three lines. |
stats | ProfileStat[] | — | { value, label }, already formatted: "12.4k". Between lines, each read as “12.4k Followers”. Three fit. |
following | boolean | false | Swaps the follow button to its outlined “Following” state. |
followLabel | string | "Follow" | Label of the follow button. |
followingLabel | string | "Following" | Label of the follow button when following. |
onFollow | () => void | — | Shows the follow button. Without it, there is none. |
messageLabel | string | "Message" | Label of the message button. |
onMessage | () => void | — | Shows the outlined message button, next to the follow button. |
onPress | () => void | — | Makes the whole card pressable, to open the profile. The buttons keep their own press. |
style | StyleProp<ViewStyle> | — | Extra styles for the card container, for example a margin. |
Built with
- Card: the elevated surface and its header.
- Avatar: the photo, or the initials on a hue from the name.
- Title: the name and the stat values.
- Text: the handle, the bio and the stat labels.
- Separator: the lines between the stats.
- Button: follow in
solid, oroutlineonce followed, and message inoutline.
Used in
No block uses Profile Card yet.