Flip Card

Display

3D flip card with hover or click trigger and horizontal/vertical axis.

Instalação via CLI

$ npx kikitocn add flip-card

Exemplo de uso

Flip CardExample.tsx

import { FlipCard } from "@/components/ui/cn/flip-card/FlipCard";

export function FlipCardExample() {
  return (
    <FlipCard />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`front*`	`ReactNode`	—	Conteúdo da face frontal
`back*`	`ReactNode`	—	Conteúdo da face traseira
`width`	`number \| string`	—	Largura do card
`height`	`number \| string`	—	Altura do card
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Eixo de rotação
`trigger`	`'hover' \| 'click'`	`'hover'`	Evento que dispara o flip
`defaultFlipped`	`boolean`	`false`	Estado inicial
`flipped`	`boolean`	—	Controlado externamente
`onFlip`	`(flipped: boolean) => void`	—	Callback ao virar
`className`	`string`	—	Classes CSS extras

Carregando…