Components
An interactive, 3D-tilt profile card component featuring an animated status cycle, tier-based glow effects, a sliding glass panel, and a customizable action button.
npx @21st-dev/cli add dhileepkumargm/profile-cardLoading preview...
import React from 'react'
import ProfileCard from '@/components/ui/profile-card'
const PROFILE_DATA = {
username: "@kp_judge",
bio: "Building the future of developer tools. Always curious.",
status: ["JUDGE", "CREATOR", "DEVELOPER", "INNOVATOR"],
tier: 3,
imageUrl: "https://i.pravatar.cc/256?u=kp-judge&grayscale",
}
function App() {
return (
<main
className="
w-full
min-h-screen
flex
items-center
justify-center
font-sans
p-4
bg-[hsl(var(--background))]
"
style={{ perspective: '1000px' }}
>
<ProfileCard data={PROFILE_DATA} />
</main>
)
}
export default App;