Profile Card

Holographic profile card that tilts toward the pointer while rainbow foil, glitter and glare slide across it, with a glass contact bar.

Maya Laurent

Product Designer

@mayalaurent

Available for work

Open

name

title

handle

status

contactText

maxTilt14

foil0.8

showUserInfo

Installation

npx shadcn@latest add @glint-ui/profile-card

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/profile-card.json

Usage

import { ProfileCard } from "@/components/ui/profile-card";

<ProfileCard
  name="Maya Laurent"
  title="Product Designer"
  handle="mayalaurent"
  avatarUrl="/maya.jpg"
  onContactClick={() => openChat()}
/>

Props

Prop	Type	Default	Description
name	string	"Maya Laurent"	Display name.
title	string	"Product Designer"	Role under the name.
handle	string	"mayalaurent"	Handle shown in the contact bar, without @.
status	string	"Available for work"	Status line with a live dot.
contactText	string	"Contact"	Button label.
maxTilt	number	14	Max tilt in degrees.
foil	number	0.8	Strength of the holographic foil.
showUserInfo	boolean	true	Show the bottom contact bar.
avatarUrl	ReactNode	—	Portrait that fills the card.
miniAvatarUrl	ReactNode	—	Small avatar in the contact bar. Defaults to avatarUrl.
onContactClick	ReactNode	—	() => void
className	string	—	Extra classes for the root element.