A rolodex of city cards where the front card flips over its top edge to reveal the next. Flip with a click, the wheel, a vertical drag, arrow keys or on a timer.
Lisbon
Portugal / 14:20
npx shadcn@latest add https://hyperblur.dev/r/card-flip-deck.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/card-flip-deck.tsx.
import { CardFlipDeck } from "@/components/hyperblur/card-flip-deck"
<CardFlipDeck autoPlay={4000} unit="F" />| Prop | Type | Default | Description |
|---|---|---|---|
| cards | { city: string; country: string; time: string; temp: number; condition: string; night?: boolean; colors?: [string, string]; forecast?: number[] }[] | six cities | Cards in the deck. Temperatures are in Celsius. |
| index | number | undefined | Controlled index of the front card. |
| defaultIndex | number | 0 | Initial front card when uncontrolled. |
| onChange | (index: number) => void | undefined | Called after each flip. |
| height | number | 168 | Card height in pixels. |
| autoPlay | number | 0 | Flips every this many milliseconds. 0 turns it off. Pauses on hover and focus. |
| unit | "C" | "F" | "C" | Temperature unit shown. |
| accent | string | "#2f7bff" | Accent color for focus rings, indicators and highlights. |
| className | string | undefined | Extra classes on the root element. |