AnimateX is a modern, Motion powered UI library built for React and Next.js applications. It focuses on delivering fluid, expressive, and intuitive animations out of the box—allowing developers to craft visually engaging interfaces with minimal effort. Unlike traditional UI libraries where animation is optional or manually added, AnimateX places motion at the core of every component. Every button press, card hover, dropdown open, and modal transition is intentionally designed to feel natural, responsive, and consistent across your entire application.

Getting Started

🎉

This guide walks you through the basics of adding Animatex to your projects and using it immediately, In just a few steps, you'll have access to a growing collection of animated components, that speed up the development process. AnimateX components can be used in two ways by simply copying the code snippets from the site or using the command line tool. Just follow the steps below on how to setup animatex using the Animatex-pro CLI

Run this within you project directory.

What this does: Running this command helps add the animatex-pro cli into your project enabling you to use it.

npm i animatex-pro@latest

Initialise animatex-pro.

What this does: This installs the required depencies animatex-pro such as;

Create a component/animatex directory where components will be stored.

Create a lib/utils.ts contains a cn function that allows you to style components easily.

For a React project. @tailwindcss/vite & tailwindcssare installed and TailwindV4 setup for your project.

npx animatex-pro init

Now just add components, import into your pages and enjoy the motion 🎈

What this does: Add components into a folder

npx animatex-pro add loadingbutton

Getting Started Without the CLI

This is a step by step approach on how you can use animatex componenets just by copying and pasting.

Warning: For best use cases it's advisable the command line be used.

Install dependencies.

npm i lucide-react motion tailwind-merge clsx

Create a lib folder.

mkdir components

Within the utils folder create a utils.ts file.

mkdir components

Copy and paste the following code inside the utils.ts

import { clsx, type ClassValue} from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs))
}

Now just copy code snippets components, paste into your pages and enjoy the motion 🎈

You love what you see dropping a star⭐ on the repo would be of great help!!Star Github

Built with ❤ by Newton