Installation

The components are built with React, TypeScript, Tailwind CSS, and mainly with Motion (Formerly Framer Motion). In order to use the components, you need to install the following dependencies:

npm install tailwindcss@latest framer-motion

Or follow the Tailwind CSS installation guide to setup Tailwind CSS in your project.

Some components uses other libraries too, in each case, you can find the installation instructions in the component's documentation.

Go to any of the components you want to use and copy the code from the "Installation" section. Then, paste it into your project.

import { LetterSwapForward } from "@/fancy/components/text/letter-swap-forward-anim";

export default function MyComponent() {
  return (
    <div className="w-full h-full flex justify-center items-center">
      <LetterSwapForward label="Hover me!" reverse={true} className="italic" />
    </div>
  );
}

If you prefer javascript instead of typescript, you can easily convert the code with a tool like this.