Flip Card

Cards 34

About

A 3D profile card that flips on hover or tap to reveal a bio, stats, and social links.

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

Code

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

Usage.tsx

"use client";

import { FlipCard } from "@/components/ui/flip-card";

const data = {
  name: "Animate UI",
  username: "animate_ui",
  image:
    "https://cdn.21st.dev/assets/localized/2714e0a93ebb6f7921d0ba9edbcb5c9a2db2b3bac7af1cfa94ff24664b49eede.jpg",
  bio: "A fully animated, open-source component distribution built with React, TypeScript, Tailwind CSS, and Motion.",
  stats: { following: 200, followers: 2900, posts: 120 },
  socialLinks: {
    linkedin: "https://linkedin.com",
    github: "https://github.com",
    twitter: "https://twitter.com",
  },
};

export default function FlipCardDemo() {
  return <FlipCard data={data} />;
}