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
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!

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
vinay • building rn
@vinayisactive

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

User avatar
EseMonday.eth 🥑
@EseMonday1

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

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
Hackmamba
@hackmamba

This is awesome 👏

User avatar
sreejith
@Srejitk

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

User avatar
vish
@indievish

Well done Manu You rock 🚀

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
Enis
@enisdev

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

User avatar
Mark Vassilevskiy
@MarkKnd

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

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
Dhanush Vardhan Kalaiselvan
@geeky_dan

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

Featured by popular YouTubers

See what the best YouTubers are saying about Aceternity UI.

Jeff from
Fireship
talks about how Aceternity UI can help you build awesome landing pages with speed
Watch
Web Prodigies
build an entire SaaS application from scratch with Aceternity UI
Josh from
Josh Tried Coding
talks about how Aceternity UI components can help your website stand out.
Watch
Hitesh Choudhary
build an entire website from scratch with Aceternity UI
Adrian from
Adrian Twarog
talks about Aceternity UI and how to use the components efficiently
Adrian from
JavaScript Mastery
creates an entire portfolio website with amazing details and beautiful UI with Aceternity UI
Watch
Raj Talks Tech
walk through Aceternity UI components and teaches how to incorporate them into your website

Get more done with Aceternity UI Pro

Aceternity UI offers free components while Pro gives you the best premium components and templates pack to help your website stand out. Professional, clean and modern components to help you get more done.

Component Thumbnail

Component Packs

Ever growing collection of components to help you ship more website features faster

template Thumbnail

Templates

Beautiful, modern and best templates to help you stand out from the crowd.

template Thumbnail

Lifetime Updates

Get the latest components and templates forever with our lifetime updates. No extra fees.

Browse PRO components and templates
Logo

Aceternity UI

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