BuouNext
  • Features
  • DocumentsNew
  • BrutalUINew
  • ShowcaseHot
  • Pricing
  • Blog

    Getting Started

    Introduction

    BuouNext Instruction

    InstallationRun BuouNextProject StructureComponentsAuthenticationEmailAPI CallsDatabasePaymentSEO OptimizationHeadless CMSContact

    AI Instruction

    AI ImageNewAI ChatbotNewAI SearchNewAI NotionNew

    Components

    Super ClockNewFloating DockNewAI Image CompareNewAvatar ListNewClockNewDarkModeNewStepperNewRotation AvatarNewButton with TrailNewDotNewGridNewCounter CardNewMarquee CardNewProfile CardNewBento gridNewBorder Trail CardNewBuouNext FeaturesNewColor CardNewMouse FollowingNewColor GridNewAnimotion In View CardNewLevitate CardNewReorder CardNewGenerate TextNewSmooth Fliping NumberNewSmooth Fliping TextNewSmooth Typing TextNewTyping TextNewWindow Typing TextNewFade In OutNewText DropNewScalingNew
    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="[email protected]"
            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."
        />
    )
}
    Marquee CardBento grid
    November 15, 2024
    Profile
    Profile

    kuo zhang

    [email protected]

    Commitment to Excellence

    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.