An animated button component with 3D flip effects and interactive hover states
"use client";import { FlipButton } from "@/components/foliokit/flip-button";const FlipButtonDemo = () => { return ( <div className="flex items-center justify-center"> <FlipButton flipContent="Kit!!">Folio</FlipButton> </div> );};export default FlipButtonDemo;pnpm dlx shadcn@latest add https://folio-kit.vercel.app/r/flip-button.jsonnpx shadcn@latest add https://folio-kit.vercel.app/r/flip-button.jsonyarn shadcn@latest add https://folio-kit.vercel.app/r/flip-button.jsonbunx shadcn@latest add https://folio-kit.vercel.app/r/flip-button.jsonimport { FlipButton } from "@/components/ui/flip-button";<FlipButton flipContent="Kit!!" flipFrom="top">
Folio
</FlipButton>"use client";import { FlipButton } from "@/components/foliokit/flip-button";const FlipButtonDemo = () => { return ( <div className="flex items-center justify-center"> <FlipButton flipContent="Kit!!">Folio</FlipButton> </div> );};export default FlipButtonDemo;import { FlipButton } from "@/components/foliokit/flip-button";const FlipButtonDirections = () => { return ( <div className="flex flex-wrap items-center justify-center gap-6"> <FlipButton flipFrom="top" flipContent="Top"> Top </FlipButton> <FlipButton flipFrom="bottom" flipContent="Bottom"> Bottom </FlipButton> <FlipButton flipFrom="left" flipContent="Left"> Left </FlipButton> <FlipButton flipFrom="right" flipContent="Right"> Right </FlipButton> </div> );};export default FlipButtonDirections;import { FlipButton } from "@/components/foliokit/flip-button";const FlipButtonColors = () => { return ( <div className="flex flex-wrap items-center justify-center gap-6"> <FlipButton background="#000000" flipBackground="#ffffff" flipTextColor="#000000" flipContent="Light" > Dark </FlipButton> <FlipButton background="#2563eb" flipBackground="#1e40af" flipTextColor="#ffffff" FlipColor="#60a5fa" flipContent="Blue" > Primary </FlipButton> <FlipButton background="#16a34a" flipBackground="#14532d" flipTextColor="#ffffff" FlipColor="#4ade80" flipContent="Go" > Success </FlipButton> </div> );};export default FlipButtonColors;import { FlipButton } from "@/components/foliokit/flip-button";import { ArrowRight } from "lucide-react";const FlipButtonWithIcon = () => { return ( <div className="flex items-center justify-center"> <FlipButton flipContent={ <span className="flex items-center gap-2"> Go <ArrowRight size={16} /> </span> } > <span className="flex items-center gap-2"> Start <ArrowRight size={16} /> </span> </FlipButton> </div> );};export default FlipButtonWithIcon;Prop
Type