Koala UI

Team Member

The person block of a team roster: a photo frame, the name, the role, an optional bio and a row of social links. Stacked, inline or set over the photo, as a plain block or an outline card.

  • Lucía Ferrer

    Lucía Ferrer

    Co-founder & CEO

  • Marcus Obi

    Marcus Obi

    Design Engineer

  • Amara Nwosu

    Amara Nwosu

    Accessibility Lead

Installation#

# One-time setup (tokens + lib helpers)npx koalaui-cli@latest init# Add this component (its dependencies come along)npx koalaui-cli@latest add team-member

Usage#

Compose the parts you need and leave the rest out: there is no showX prop. A roster without bios omits TeamMemberBio, one without links omits TeamMemberSocials, and a list with no photos omits the media altogether. TeamMemberMedia is a frame for whatever picture you pass it (an <img> or next/image), cropped to cover. A small face can be the Avatar component instead, which every layout treats the same way. Pass asChild to render the member as the <li> of your roster list.

Layouts#

stacked (the default) puts the photo above the copy, the portrait grid and the carousel card. inline puts a small photo beside it, the directory row, and scales the frame and its radius down with it. overlay sets the copy on the foot of the photo over a dark scrim, the wall of faces; the scrim is dark on every theme, so the names stay white and legible whatever the picture.

Lucía Ferrer

Co-founder & CEO

Marcus Obi

Design Engineer

Amara Nwosu

Accessibility Lead

Card#

variant="card" gives the member a box of its own: an inset ring on the page ground, no fill. Around a round face it pads 20px; around a photo that fills its width it insets the photo 8px, so the photo's 16px corner stays concentric with the card's 24px one, and the copy keeps its own 12px step. In a row of cards the links sit on each card's foot. Over a photograph the card becomes a floating panel inset from the foot instead of a scrim.

Lucía Ferrer

Co-founder & CEO

Started Koala after building the same button at three jobs.

Marcus Obi

Design Engineer

Amara Nwosu

Accessibility Lead

Marcus Obi

Design Engineer

AN

Amara Nwosu

Accessibility Lead

Shapes#

The frame's shape: a 4:5 portrait (the default), a 4:3 landscape, a square, or a circle. The first three fill their column; a circle holds the size you give it, since a round face stretched to a wide column would crowd the row.

portrait

landscape

square

circle

Alignment#

align="center" centres the frame, the copy and the links on the column, the shape for round portraits and centred rosters. start (the default) keeps everything on the left edge.

Lucía Ferrer

Co-founder & CEO

Marcus Obi

Design Engineer

Anatomy#

TeamMember is the root and carries the layout, align and variant. TeamMemberMedia is the photo frame and carries the shape. TeamMemberContent groups the copy so it can sit beside or over the photo as one block. TeamMemberName is an <h3> (or your own element with asChild), TeamMemberRole and TeamMemberBio are paragraphs, and TeamMemberSocials holds the TeamMemberSocial icon links. Every part forwards its native props and carries a data-slot.

FAQ#

An inset ring on an image is drawn under it, so it never shows. The frame paints its hairline with an ::after overlay instead, in pure black or white at 10%: a tinted neutral would pick up the photo's colour and read as dirt on its edge.