FolioKit

Flip Button

An animated button component with 3D flip effects and interactive hover states

Installation

pnpm dlx shadcn@latest add https://folio-kit.vercel.app/r/flip-button.json
npx shadcn@latest add https://folio-kit.vercel.app/r/flip-button.json
yarn shadcn@latest add https://folio-kit.vercel.app/r/flip-button.json
bunx shadcn@latest add https://folio-kit.vercel.app/r/flip-button.json

Usage

import { FlipButton } from "@/components/ui/flip-button";
<FlipButton flipContent="Kit!!" flipFrom="top">
  Folio
</FlipButton>

Examples

Default Flip Button

Flip Direction

Custom Colors

Flip Button with Icon

Props

Prop

Type

API Reference

Motion React API Reference

On this page