Docs
Profile Card

Profile Card

Displays a beautiful Profile Card.

Loading...

Installation

Install the following dependencies:

npm install framer-motion

Copy and paste the cn util code into your project.

import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Copy and paste the Profile Card code into your project.

Usage

export default function ProfileCardDemo(){
    return (
        <ProfileCard
            avatarUrl1="/images/avatars/buoooou.png"
            avatarUrl2="/images/avatars/buoooou.png"
            name="kuo zhang"
            email="zhangkuo921112@gmail.com"
            date="November 15, 2024"
            title="Commitment to Excellence"
            content="We pursue excellence in everything we do while staying true to our founding principles. Success is measured not just by technical achievement but by the positive impact on our users."
        />
    )
}
Twitter Dis...Frosted Gla...