Profile Card

Beautiful user profile display card

$ npx @hritik-sharmaa/repeat-ui add card-profile-card
Category
Card
Added
Aug 14, 2025
Version
2.0.0
Packages
None
Flavors
TS · JS · Tailwind · CSS
Live preview
Maya Chen

Maya Chen

Product designer. Collects fonts and houseplants.

2,230
Customize
2230
36px
import CardProfileCard from "@/components/repeat-ui/card-profile-card/preview";

<CardProfileCard
  image="/avatar.jpg"
  name="Maya Chen"
  bio="Product designer. Collects fonts and houseplants."
/>

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add card-profile-card --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/card-profile-card/.

    import CardProfileCard from "@/components/repeat-ui/card-profile-card/preview";

export default function Page() {
  return <CardProfileCard />;
}

Props

PropTypeDefaultDescription
imagestring-Photo URL.
namestring"Maya Chen"Display name.
verifiedbooleantrueShow the verified badge.
biostring"Product designer. Collects fonts and houseplants."A line about the person.
followersnumber-Follower count; following adds one.
accentColorstring"#111827"Follow button colour.
verifiedColorstring"#22c55e"Verified badge colour.
radiusnumber36Card corner radius in pixels.
onFollow(following: boolean) => void-Called with the new state when the button is pressed.
classNamestring""Extra classes for the root element.

More card

See all
3d CardInteractive 3D card with hover tilt effects
Pricing CardElegant pricing plan showcase card
Ink RevealBrush the pointer over an image to paint its colours in