18Switch language to العربية

User Info Card

PreviousNext

A compact user display with avatar, name, and email.

import { UserInfoCard } from "@/components/atom/user-info-card"

export default function UserInfoCardDemo() {
  return (
    <>
      <UserInfoCard name="John Doe" email="john@example.com" />
    </>
  )
}

Installation

pnpm dlx shadcn@latest add @codebase/user-info-card

Usage

import { UserInfoCard } from "@/components/atom/user-info-card"
<UserInfoCard name="John Doe" email="john@example.com" />

Examples

With Avatar

JS

Jane Smith

jane@example.com

<UserInfoCard
  name="Jane Smith"
  email="jane@example.com"
  avatar="https://github.com/shadcn.png"
/>