Skip to content
Docs
Back to Components

ProfileCard

@hua-labs/ui/data
v1.0.0

A card component for displaying user profile information including avatar, name, email, and membership tier.

설치

bash
npm install @hua-labs/hua
Import
tsx
import { ProfileCard } from "@hua-labs/ui/data";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

라이브 데모

기본 사용법

J
John Doe!Premium
john@example.com
가입일 2024년 1월 1일

인사말 포함

J
Hello
Jane Smith!Pro
jane@example.com
가입일 2023년 6월 15일

변형

default
D
Default Style!Basic
default@example.com
gradient
G
Gradient!Premium
gradient@example.com
minimal
M
Minimal!Pro
minimal@example.com

멤버십 등급

B
Basic!Basic
basic@example.com
P
Pro!Pro
pro@example.com
P
Premium!Premium
premium@example.com
A
Admin!Admin
admin@example.com

아바타 없이

Bob Wilson!Pro
bob@example.com

Props

이름타입기본값설명
name*string-User name
emailstring-User email address
avatarstring-Avatar image URL
avatarAltstring-Avatar alt text
greetingstring-Greeting message shown above the name
memberSinceDate | string-Date when user joined
membershipTier"basic" | "pro" | "premium" | "admin"-Membership tier level
membershipLabelstring-Custom label for membership badge
onSettingsClick() => void-Handler for settings button click
settingsHrefstring-URL for settings link
variant"default" | "gradient" | "minimal""default"시각적 스타일 변형
showAvatarbooleantrueWhether to show the avatar
showMembershipbooleantrueWhether to show the membership badge
showSettingsbooleantrueWhether to show the settings button

코드 예시

기본 사용법

BasicProfileCard.tsxtsx
import { ProfileCard } from "@hua-labs/ui/data";

export function BasicProfileCard() {
  return (
    <ProfileCard
      name="John Doe"
      email="john@example.com"
      membershipTier="premium"
      memberSince={new Date("2024-01-01")}
      onSettingsClick={() => console.log("Settings clicked")}
    />
  );
}

인사말 포함

ProfileCardWithGreeting.tsxtsx
import { ProfileCard } from "@hua-labs/ui/data";

export function ProfileCardWithGreeting() {
  return (
    <ProfileCard
      name="Jane Smith"
      greeting="Hello"
      variant="gradient"
      membershipTier="pro"
      settingsHref="/settings"
    />
  );
}