Bio Card

Component

About

A compact profile card showing a user's initials avatar, name, short bio, social links, and a toggleable follow button.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Bio Card to your project and fits it to your theme.

Code

How Bio Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { BioCard } from "@/components/ui/bio-card";

export default function BioCardDemo() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center bg-background p-8">
      <BioCard
        name="Ada Lovelace"
        initials="AL"
        bio="Ticketing specialist"
        links={[{ platform: "Web", href: "#" }]}
      />
    </div>
  );
}