User Profile Card

Avatar with name, role, and a presence dot in emerald, amber, or slate.

MÖ

Merve ÖzkanProduct Designer

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Card4 } from "@/components/beste/piece/card4";

<Card4
  avatarSrc="https://images.unsplash.com/photo-1614283233556-f35b0c801ef1?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjI3fHxwb3J0cmFpdHxlbnwwfHwwfHx8MA%3D%3D"
  avatarAlt="Merve Özkan"
  fallback="MÖ"
  name="Merve Özkan"
  role="Product Designer"
  status="online"
/>