Profile Card

User profile. Pro · Content and social › Social

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add profile-card

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ProfileCard } from 'valyro-ui-pro';

Props

Prop	Type	Default
`name` *	`string`		Display name; also the card's accessible name and the avatar's initials.
`handle` *	`string`		Username shown as "@handle"; also seeds the generated cover.
`avatarSrc`	`string`		Avatar image URL; initials of `name` are shown without it.
`verified`	`boolean`		Adds a verified badge after the name.
`bio`	`string`		Short description under the handle.
`location`	`string`		Place shown with a pin icon (vertical layout only).
`website`	`{ label: string; href?: string }`		Website line (vertical layout only); a link opening in a new tab when `href` is set.
`joined`	`DateInput`		Join date (Date, ISO string or epoch ms), shown as "Joined" month and year (vertical layout only).
`stats`	`ProfileStats`		Counts in compact form; only the given ones are shown. The horizontal layout shows followers only.
`coverSrc`	`string`		Cover image URL; falls back to a generated gradient.
`coverSeed`	`string`		Seed for the generated cover gradient (defaults to the handle).
`following`	`boolean`		Whether the viewer follows this profile.
`defaultFollowing`	`boolean`	`false`	Initial `following` when uncontrolled.
`onFollowingChange`	`(following: boolean) => void`		Called with the new `following` when it changes.
`onMessage`	`() => void`		Shows the message button.
`layout`	`'vertical' \| 'horizontal'`	`'vertical'`	`horizontal` is a compact row for lists and suggestions.
`locale`	`string`		Locale for counts and dates (default: the ThemeProvider's, then the browser's).
`labels`	`Partial<ProfileCardLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Post Card — Social post card
Comment Thread — Nested comment thread
Reaction Bar — Likes and reactions
Article Header — Article header: section, headline, lede, authors and date
Byline — Byline: authors, published and updated dates, reading time
Article Figure — Image with caption and photo credit
Pull Quote — Pull quote with attribution
Key Points — “Key points” summary block
Editor Note — Update, correction, disclosure and sponsored-content notes
Article Toc — Article table of contents that tracks the current section
Reading Progress — Reading progress bar
Share Bar — Share: Telegram, VK, X, WhatsApp, email and copy link

Previous: Comment Thread · Next: Reaction Bar · All Content and social