PioneerUI
Hover to reveal
What you get
- ✓ 40+ animated components
- ✓ CLI install in one command
- ✓ Dark mode out of the box
- ✓ Full TypeScript support
PioneerUI
Hover to reveal
What you get
- ✓ 40+ animated components
- ✓ CLI install in one command
- ✓ Dark mode out of the box
- ✓ Full TypeScript support
Installation
Usage
import { FlipCard } from "@/components/pioneerui/flip-card"
const Front = () => <div className="h-full bg-violet-600 flex items-center justify-center text-white font-bold">Front</div>
const Back = () => <div className="h-full bg-zinc-900 flex items-center justify-center text-white">Back</div>
export default function Page() {
return <FlipCard front={<Front />} back={<Back />} trigger="hover" />
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
front | ReactNode | — | Content shown on the front face |
back | ReactNode | — | Content revealed on flip |
trigger | "hover" | "click" | "hover" | What triggers the flip |
width | number | string | 280 | Card width |
height | number | string | 340 | Card height |