ProfileCard
profile-cardPresents a holographic identity card with pointer tilt, glare, and an initials fallback.
Usage
Basic usage
When there is no avatar, the "initial" placeholder is dropped, and the pointer tilt + holographic gloss is turned on by default.
Lin Yu
Independent Developer
<ProfileCard name="Lin Yu" title="Independent developer" handle="linyu" />Halo color
glowColor Feed chart token with --color- prefix, driving radial halo and edge brilliance.
Su Wan
Product Designer
<ProfileCard
name="Su Wan"
title="Product Designer"
handle="suwan"
status="Busy"
glowColor="var(--color-chart-3)"
/>Static card
enableTilt={false} Turn off tilt and pointer interaction, retaining the gradient and bottom information bar.
Hulian
Front-end Engineer
<ProfileCard
name="Hulian"
title="Front-end Engineer"
handle="hulianui"
enableTilt={false}
/>Hide message bar
showUserInfo={false} Remove the frosted glass information bar at the bottom, leaving only the main title and avatar.
Javi Torres
Software Engineer
<ProfileCard
name="Javi Torres"
title="Software Engineer"
showUserInfo={false}
glowColor="var(--color-chart-2)"
/>When to use
Use ProfileCard for a polished personal or team profile with structured name, role, handle, status, and contact action. Use TiltedCard for a generic tilting image, or PixelCard for a pixel-animated card.
Import
import { ProfileCard } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| avatarUrl | string | — | Avatar URL. Omission uses the first character of name without a remote asset. |
| name | string | "\u745a\u740f" | Main name; the built-in Chinese default means “Hulian.” |
| title | string | "\u524d\u7aef\u5de5\u7a0b\u5e08" | Role; the built-in Chinese default means “Frontend engineer.” |
| handle | string | "hulianui" | User handle in the lower information bar. |
| status | string | "\u5728\u7ebf" | Status; the built-in Chinese default means “Online.” |
| contactText | string | "\u8054\u7cfb" | Contact action; the built-in Chinese default means “Contact.” |
| showUserInfo | boolean | true | Shows the lower glass information bar. |
| enableTilt | boolean | true | Enables pointer tilt and holographic sheen; reduced motion makes it static. |
| glowColor | string | var(--color-chart-1) | Holographic highlight color. Use a real --color- token or any CSS color. |
| aspectRatio | number | 0.74 | Card width-to-height ratio. |
| className | string | — | Class name forwarded to the root. |
| style | CSSProperties | — | Inline styles forwarded to the root. |
Events
| Event | Type | Description |
|---|---|---|
| onContactClick | () => void | Called when the contact button is selected. |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Custom front-face content above the avatar and below the information bar. |
Usage notes
- [[hulian-token-color-var-needs-color-prefix]]: use
var(--color-chart-1), not barevar(--chart-1)orvar(--primary). - The RAF spring has no WebGL dependency.
enableTilt={false}and reduced motion retain the gradient and profile information in a static card. - The avatar alt appends built-in Chinese
" \u5934\u50cf"(“ avatar”) toname; the contact button label prepends"\u8054\u7cfb "(“Contact ”). These dynamic labels therefore remain Chinese unless the runtime is localized.
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
Lin Yu
Independent Developer
<div className="grid min-h-[520px] place-items-center rounded-xl"
style={{ background: "oklch(0.16 0.02 265)" }}>
<ProfileCard
name="Lin Yu"
title="Independent Developer"
handle="linyu"
status="Online"
enableTilt={true}
glowColor="var(--color-chart-1)"
/>
</div>