Components
Flip card
A card with two faces that turns over on a spring — overshooting a little and settling — and leans toward the pointer with a moving glare. Flip on click or on hover.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { FlipCard } from '@vizzele/react';
<FlipCard
label="Pro plan"
front={<PlanFront />}
back={<PlanDetails />}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
front / back | ReactNode | — | The two faces. |
trigger | 'click' | 'hover' | 'click' | What turns it. |
direction | 'horizontal' | 'vertical' | 'horizontal' | Axis. |
flipped / defaultFlipped / onFlippedChange | boolean | — | Controlled or not. |
label | string | — | Accessible name in click mode. |
Accessibility
- In click mode it is a toggle button (Enter or Space) with aria-pressed.
- The hidden face is inert and aria-hidden, so focus and screen readers only reach the side you see.
- In click mode keep the faces free of other buttons and links — or control flipped yourself.