Lucent UI
← StepperProfileCardStatsRow →
✦ LLM-ready

ProfileCard

pattern

User profile card composed from Card, Avatar, Text (display font), Chip, Row, Stack, Divider, and Button. Features a stat row with 2xl display numbers, borderless clickable chips for tags, and action buttons. Compact collapsible variant uses a filled Card with Collapsible.

"Create a ProfileCard using lucent-ui: Card elevated wrapping Avatar, display-font name, subtitle, borderless clickable Chips, a stat row with 2xl display numbers, and action Buttons. Use Stack and Row for layout, Divider for separation."

Usage

React / JSX
import { Card, Avatar, Text, Chip, Row, Stack, Divider, Button, Collapsible } from 'lucent-ui'

<ProfileCard Card variant="elevated" Avatar size="xl" Text family="base" />

Installation

pnpm add lucent-ui

API Reference

ProfileCard props — * required

PropTypeDefaultDescription
Card variant"ghost" | "outline" | "filled" | "elevated" | "combo""elevated"Elevation level of the outer card.
Avatar srcstring—Profile image URL.
Avatar size"xs" | "sm" | "md" | "lg" | "xl" | "2xl""xl"Avatar dimensions.
Text family"base" | "mono" | "display""base"Use display for the name heading.
Chip borderlessbooleanfalseRemoves border for a softer tag appearance.