Introducing Aceternity UI Pro - Premium component packs and templates to build awesome websites.
Logo

Make your websites look
10x

better

Copy paste the most trending components and use them in your websites without having to worry about styling and animations.

Browse ComponentsCustom Components
Next.js
React
TailwindCSS
Framer Motion

Used by companies and people working at

GoogleMicrosoftCiscoZomatoBetter AuthGreat FrontendStrapiNeon Database

As simple as copy and paste

Copy paste the code into your ui folder and use the components in your projects. It's that simple, really.

esc
F1
F2
F3
F4
F5
F6
F7
F8
F8
F10
F11
F12
~`
!1
@2
#3
$4
%5
^6
&7
*8
(9
)0
—_
+ =
delete
tab
Q
W
E
R
T
Y
U
I
O
P
{[
}]
|\
caps lock
A
S
D
F
G
H
J
K
L
:;
"'
return
shift
Z
X
C
V
B
N
M
<,
>.
?/
shift
fn
control
option
command
command
option
"use client";
  import { useEffect, useState } from "react";
  import { motion } from "motion/react";
  
  let interval: any;
  
  type Card = {
    id: number;
    name: string;
    designation: string;
    content: React.ReactNode;
  };
  
  export const CardStack = ({
    items,
    offset,
    scaleFactor,
  }: {
    items: Card[];
    offset?: number;
    scaleFactor?: number;
  }) => {
    const CARD_OFFSET = offset || 10;
    const SCALE_FACTOR = scaleFactor || 0.06;
    const [cards, setCards] = useState<Card[]>(items);
  
    useEffect(() => {
      startFlipping();
  
      return () => clearInterval(interval);
    }, []);
    const startFlipping = () => {
      interval = setInterval(() => {
        setCards((prevCards: Card[]) => {
          const newArray = [...prevCards]; // create a copy of the array
          newArray.unshift(newArray.pop()!); // move the last element to the front
          return newArray;
        });
      }, 5000);
    };
  
    return (
      <div className="relative  h-60 w-60 md:h-60 md:w-96">
        {cards.map((card, index) => {
          return (
            <motion.div
              key={card.id}
              className="absolute dark:bg-black bg-white h-60 w-60 md:h-60 md:w-96 rounded-3xl p-4 shadow-xl border border-neutral-200 dark:border-white/[0.1]  shadow-black/[0.1] dark:shadow-white/[0.05] flex flex-col justify-between"
              style={{
                transformOrigin: "top center",
              }}
              animate={{
                top: index * -CARD_OFFSET,
                scale: 1 - index * SCALE_FACTOR, // decrease scale for cards that are behind
                zIndex: cards.length - index, //  decrease z-index for the cards that are behind
              }}
            >
              <div className="font-normal text-neutral-700 dark:text-neutral-200">
                {card.content}
              </div>
              <div>
                <p className="text-neutral-500 font-medium dark:text-white">
                  {card.name}
                </p>
                <p className="text-neutral-400 font-normal dark:text-neutral-200">
                  {card.designation}
                </p>
              </div>
            </motion.div>
          );
        })}
      </div>
    );
  };

Loved by thousands of people

Here's what some of our users have to say about Aceternity UI.

User avatar
Teddy Ni
@Teddarific

Wow, this site is an ABSOLUTE GOLDMINE for design engineers. It's a huge collection of micro-interactions / animations, all with their respective source code for you to copy and paste. Love to see such an amazing display of my favorite package, framer-motion

User avatar
Rayhan Hossain Rahat
@rh_rahat_dev

Absolutely Awesome, Would really love to use some of these in my projects

User avatar
iOS/MacOS Developer | Swift | Xcode
@InLessimore

I really like it.I will try to use it my next app

User avatar
Oamar
@oamarkanji

Man this is awesome

User avatar
Rajesh David
@rajeshdavidbabu

ui.aceternity.com So well done. And its bloody free 🤯🤯 Phenomenal work by @mannupaaji

User avatar
Rayhan Hossain Rahat
@rh_rahat_dev

Absolutely Awesome, Would really love to use some of these in my projects

User avatar
Joe Mifsud
@Joe_Mifsud

These look awesome, nice work!

User avatar
Greg Bergé
@gregberge_

✨ Aceternity UI is a complete collections of stunning effects ready to used for your website. It's shadcn/ui for magic effects. Can't believe it's free! 👉 ui.aceternity.com

User avatar
Hackmamba
@hackmamba

This is awesome 👏

User avatar
vinay • building rn
@vinayisactive

Upon my return from a short break every time, I consistently find innovative additions by you✨🤌🏻

User avatar
sreejith
@Srejitk

So happy to see @mannupaaji work being recognised 🥹🤌🏻♥️ His work is literally a treasure trove for devs 💎

User avatar
EseMonday.eth 🥑
@EseMonday1

There are level to this things Congratulations @mannupaaji 👏🏾👏🏾

User avatar
metinn
@mjakupiiii

Amazing 🚀

User avatar
Yousef | Landing Pages
@Yousefcopy

Looks sick 👌🏼

User avatar
Micky
@rasmickyy

Yoo.... This has to be the most beautiful component library I've ever seen!! ui.aceternity.com Shoutout to @mannupaaji for releasing this for free!

User avatar
flatRhythm
@potaatopatato

I like the interaction and animation. Beautiful!

User avatar
Enis
@enisdev

Bro this is too beautiful, why is this even free??

User avatar
Design Chief Priest
@dnaijatechguy

Aceternity UI has some of the best components for designing landing pages I've ever seen. If you're struggling with figuring out what animations to use. Check it out. Thank me later 😉. ui.aceternity.com

User avatar
vish
@indievish

Well done Manu You rock 🚀

User avatar
sus646
@sus6461

is amazing ❤️‍🔥❤️‍🔥 It is open forever?

User avatar
Adrian | JavaScript Mastery
@jsmasterypro

Have you heard of Aceternity UI? It's packed with various animated components that are ready to copy and paste! Mind-blowing stuff... 🤯 Click here ➡️ ui.aceternity.com #framermotion #nextjs #tailwindcss #techinnovation

User avatar
Greg Bergé
@gregberge_

It’s awesome 👏

User avatar
Mark Vassilevskiy
@MarkKnd

You can’t imagine how much time I spent to find the flashlight effect. Super useful!

User avatar
Dhanush Vardhan Kalaiselvan
@geeky_dan

@aceternitylabs is just awesome, added some of its elements in my portfolio website

User avatar
Jeremy
@geekpreneur_

Looking absolutely awesome ! 👏

User avatar
Rexan Wong
@rexan_wong

🔖 Bookmarking it right away

User avatar
Paarth Agarwal
@PaarthAgarwal17

I just tried it out this is crazy awesome

User avatar
Rajdeep Seth
@rajdeepseth1

Stumbled upon ui.aceternity.com today and my mind is blown 🤯 The seamless integration of framer-motion, tailwind CSS, and shadcn showcases a masterclass in UI design. 🚀 Kudos to @mannupaaji for creating such an innovative and inspirational resource for devs! #UI #nextjs

User avatar
Cody De Arkland
@Codydearkland

This library is so dope. Stoked to see more components drop.

User avatar
shubh
@PatniShubh

bro just keeps dropping crazy alpha

User avatar
Ajay
@ajayvignesh01

Wow, this is awesome!

User avatar
Nahuel Candia
@dncandia

This is absolutely mind blowing. Animated UIs are the big leap forward on modern interfaces. Already thinking on how to build our website using these 💡

User avatar
Sean brydon
@SeanBrydon13

Wow all for free! Setup a tip jar or buy me a coffee! I’d paid or this

User avatar
YOLO ツ
@torytang025

Amazing, why are you so productive 🫡

User avatar
Vlad
@deifosv

This component are 🔥 great work

User avatar
EseMonday.eth 🥑
@EseMonday1

This is bc amazing 👏🏾👏🏾👏🏾

User avatar
Sandeep
@sandeep_indie

I do highly recommend checking out ui.aceternity.com/components by @mannupaaji It's greaaaat!

Featured by popular YouTubers

Fireship
Josh Tried Coding
Chai Aur Code
Adrian Twarog
Javascript Mastery
Raj Talks Tech
Logo

Aceternity UI

A product by Aceternity
Building in public at @mannupaaji
PricingComponentsTemplatesCategoriesBlogBox ShadowsShowcase
TwitterDiscord
Aceternity UI ProAceternity