FlipCard

A simple 3D flip card component for React

Installation

Install via shadcn CLI:

# Using bun
bunx --bun shadcn@latest add https://flipcard.sachi.dev/r/flipcard.json

# Using npm
npx shadcn@latest add https://flipcard.sachi.dev/r/flipcard.json

# Using pnpm
pnpm dlx shadcn@latest add https://flipcard.sachi.dev/r/flipcard.json

# Using yarn
yarn shadcn@latest add https://flipcard.sachi.dev/r/flipcard.json

Usage

import { FlipCard, FlipFace } from "@/components/flipcard";

function MyComponent() {
  return (
    <FlipCard flipped={controlledState}>
      <FlipFace dir="front">
        <h2>Front Side</h2>
        {/* Your front content */}
      </FlipFace>
      <FlipFace dir="back">
        <h2>Back Side</h2>
        {/* Your back content */}
      </FlipFace>
    </FlipCard>
  );
}

License

MIT License