Team Member
Team member card: one person on a team page with a full-width portrait and hairline outline, then the name and role as a byline, then an optional bio. Everything comes from props.
pnpm dlx shadcn add @01orbital/team-memberThe source comes with full access.
One payment of $149 opens the source right here and lets the CLI install every paid component, with lifetime updates.
The example also uses byline and celestograph-placeholder. Install them too:
pnpm dlx shadcn add @01orbital/byline @01orbital/celestograph-placeholdernpx shadcn add @01orbital/byline @01orbital/celestograph-placeholderyarn shadcn add @01orbital/byline @01orbital/celestograph-placeholderbunx --bun shadcn add @01orbital/byline @01orbital/celestograph-placeholderUsage
import {
Byline,
BylineDescription,
BylineName,
} from "@/components/byline/byline"
import { CelestographPlaceholder } from "@/components/celestograph/celestograph-placeholder"
import {
TeamMember,
TeamMemberBio,
TeamMemberPortrait,
} from "@/components/team/team-member"
// The copy: change text here, not in the markup.
const PEOPLE = [
{
name: "Kalpana Chawla",
role: "Head of Engineering",
bio: "Leads the platform team and still reviews every release note.",
},
{
name: "Ellen Ochoa",
role: "Design Lead",
bio: "Runs the design system and the weekly critique.",
},
] as const
export default function TeamMemberDemo() {
return (
<ul role="list" className="grid w-full max-w-lg grid-cols-2 gap-6 p-6">
{PEOPLE.map((person) => (
<TeamMember key={person.name} render={<li />}>
<TeamMemberPortrait>
<CelestographPlaceholder shape="portrait" from={person.name} />
</TeamMemberPortrait>
<Byline>
<BylineName>{person.name}</BylineName>
<BylineDescription>{person.role}</BylineDescription>
</Byline>
<TeamMemberBio>{person.bio}</TeamMemberBio>
</TeamMember>
))}
</ul>
)
}Anatomy
Team Member is built from 3 parts. In the example they nest like this:
TeamMember
├─ TeamMemberPortrait
└─ TeamMemberBioTeamMember: One person on a team page, as adivgrid with 16px between its parts: aTeamMemberPortrait, then aByline(withBylineNameandBylineDescriptionfor the name and role), then an optionalTeamMemberBio. Passrender={<li />}when it sits in a list. Style any part with its ownclassName.TeamMemberPortrait: The picture, set in a full-width 3:4 frame with a hairline outline and 6px corners: an<img>fills and crops to it, or put artwork such as aCelestographPlaceholderinside.TeamMemberBio: A short paragraph about the person, 14px/24px muted, under the byline.
API reference
TeamMember
One person on a team page, as a div grid with 16px between its parts: a TeamMemberPortrait, then a Byline (with BylineName and BylineDescription for the name and role), then an optional TeamMemberBio. Pass render={<li />} when it sits in a list. Style any part with its own className.
It accepts the props of the Base UI part it wraps, and the HTML attributes of the element it renders.
TeamMemberPortrait
The picture, set in a full-width 3:4 frame with a hairline outline and 6px corners: an <img> fills and crops to it, or put artwork such as a CelestographPlaceholder inside.
Prop
Type
It also accepts the props of the Base UI part it wraps, and the HTML attributes of the element it renders.
TeamMemberBio
A short paragraph about the person, 14px/24px muted, under the byline.
It accepts the HTML attributes of the element it renders.
Dependencies
npm: @base-ui/react, cn. The CLI installs them for you.
Registry pieces it installs with it: