Flip Button

"use client"

import {
  FlipButton,
  FlipButtonBack,
  FlipButtonFront,
  type FlipDirection,
} from "@/components/animate-ui/buttons/flip"

export default function FlipButtonDemo({
  from = "top",
  tapScale = 0.97,
}: {
  from?: FlipDirection
  tapScale?: number
}) {
  return (
    <FlipButton from={from} tapScale={tapScale}>
      <FlipButtonFront>
        Front
      </FlipButtonFront>
      <FlipButtonBack>
        Back Button
      </FlipButtonBack>
    </FlipButton>
  )
}

InstallationCopy Anchor Link

npx shadcn@latest add @animate-ui/buttons-flip

pnpm dlx shadcn@latest add @animate-ui/buttons-flip

yarn dlx shadcn@latest add @animate-ui/buttons-flip

bun x shadcn@latest add @animate-ui/buttons-flip

UsageCopy Anchor Link

import {
  FlipButton,
  FlipButtonBack,
  FlipButtonFront,
} from '@/components/animate-ui/buttons/flip';

export function Subscribe() {
  return (
    <FlipButton from="top">
      <FlipButtonFront>Subscribe</FlipButtonFront>
      <FlipButtonBack>It's free</FlipButtonBack>
    </FlipButton>
  );
}

AnimationCopy Anchor Link

• On hover, the front face rotates away (90°, sliding half its height or width) and fades out while the back face rotates in from from, on a bouncy spring (stiffness: 280, damping: 20) that swings past the end before settling. Leaving flips it back.
• The faces are stacked in the same grid cell: the button takes the size of the larger one.
• Pressing scales the button to tapScale on Motion's spring for scale (stiffness: 550, damping: 30).
• <AnimateUIProvider tempo> paces the default springs.
• Under reduced motion, the faces crossfade without rotating or sliding, and the button doesn't scale.

API ReferenceCopy Anchor Link

FlipButtonCopy Anchor Link

FlipButtonFrontCopy Anchor Link

FlipButtonBackCopy Anchor Link

useFlipButtonCopy Anchor Link

Returns { from, isVertical, rotateAxis } inside a FlipButton.