Ax

AnimateX

Ctrl + K
Ax

UI

Introduction

Getting Started

Setup

Sliders

Buttons

Press Button

Aura Button

Aero Button

Pulse

Shimmer Button

Delete

Arrow Button

Menus

Circular

Gooey

Pill

Blocks

Accordion

Content Alert

Feedback

Cards

Swipe Cards

Swipe Cards 2

Tilt Card

Infinite Sliding

Squishy CardsNew

Backgrounds

Meteor Shower

Hover Aura

Stars Glimmer

Fade

TouchpadNew

Inputs

Password Confirm

OTP

SliderNew

Texts

Zoop

Incrementer

Blur Fade

Circular TextNew

Modals

AvartarNew

Subscription CardNew

Introducing pre-built blocks
AnimateX
Experience
Learn
Animate

This is more than just a library. Its a motion playground. Packed with custom-built, fully animated UI components, crafted with Framer Motion and styled with Tailwind. Every component is smooth, responsive and ready to light up your next project.

Star on Github
Built with
NNNN
Components

Complete blocks for rapid developemt.

A library of clean, animated components designed for modern interfaces and seamless user experiences.

Hover Me
HoverMe
HoverMe
Features

Why use AnimateX?

50+ components ready to copy and paste into your projects

Customizable

Modify components with props and Tailwind classes.

Copy & Paste

Copy and paste code directly into your project.

Ready to use

Production-ready components dropped out of the box.

Open Source

Free to use and modify.

Fast Development

Build UIs faster with pre-built components.

Accessible

Components work for everyone.

Customisation & Flexibility

Unlimited Customisation for your unique needs.

Easily customizable components that adapt to your every need.

AnimateX.com

-
page.tsx

1

Import React, {useState} from react

2

Import Notify from components/ui/notify

3

const page = () => {

4

const [isAllowed, setisAllowed] = useState(false)

5

return (

6

<>

7

<Notify

8

"type":

9

"message":

10

"condition": {isAllowed}

11

"direction":

12

"axis":

13

"displacement":

14

"duration":

15

/>

16

<button className='text-white p-2 rounded-md px-4 bg-black cursor-pointer' onClick={() => setIsallowed(!isAllowed)}>Allow</button>

17

</>

18

)

19

}

/preview
Default State
Community

Join Our Community.

Connect, Learn and grow with fellow designers and developers

logo

Twitter

Stay updated with announcements, tips and general info.

logo

Github

Report bugs, request features and contribute to project.

logo

Discord

Join the community, ask questions and share tips.

Be part of that community that connects, learns and grows together.

Visit the wall of Love

See what developers are saying.

image

David M.

@Frontend Developer

Using these components cut my animation time in half! It's like Tailwind meets Framer Motion but eith more soul

image

Amira C.

@Student Devevloper

I'm new to frontend, and this made me feel like a pro. Setup was simple, and everthing just worked.

image

Jules A

@Product Designer

Not a UI/UX designer? Doesn't matter. This library makes any dev look like a motion pro. It's aesthetic magic in a box

image

Tolu W.

@JavaScript Enthusiast

This is what modern frontend should feel like responsive, animated and a little bit magical.

image

David M.

@Frontend Developer

Using these components cut my animation time in half! It's like Tailwind meets Framer Motion but with more soul

image

Johan A.

@MrBean

Really love this, the user interactions are just lit.

image

Amira C.

@Student Devevloper

I'm new to frontend, and this made me feel like a pro. Setup was simple, and everthing just worked.

image

Johan Atkinson

@MrBean

Really love this, the user interactions are just lit.

image

Nia R.

@UX Consultant

The Animations are tasteful not over kill. It's rare to see a library get that baalance right.

Documentation

AnimateX

Created with by Ngwa Newton-Raul

Copyright 2025