Flip Card

A dynamic flip card with smooth 180-degree flipping animations along both the X and Y axes, providing an engaging and interactive visual effect.

Install using CLI

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://registry.inspira-ui.com/flip-card.json"

Copy and paste the following code

FlipCard.vue

Prop Name	Type	Default	Description
`class`	`string`	`-`	The class to be applied to the component.
`rotate`	`x \| y`	`y`	You can pass the rotate value as you want.

Slot Name	Description
`default`	Component to show as front.
`back`	Component to show as back.

On This Page