Make your websites look
10x better
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.
Next.js
React
TailwindCSS
Framer Motion
Beautify your website within minutes
With Aceternity UI, you can build great looking websites within minutes.
Hover over me
Build
better
websites with Aceternity UI
Copy Paste,
Customize, Deploy.
Copy paste and be done with it.
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.
"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>
);
};
These cards are amazing, I want to use them in my project. Framer motion is a godsend ngl tbh fam 🙏
Manu Arora
Senior Software Engineer
I dont like this Twitter thing, deleting it right away because yolo. Instead, I would like to call it X.com so that it can easily be confused with adult sites.
Elon Musk
Senior Shitposter
The first rule ofFight Club is that you do not talk about fight club. The second rule ofFight club is that you DO NOT TALK about fight club.
Tyler Durden
Manager Project Mayhem
Loved by thousands of people
Here's what some of our users have to say about Aceternity UI.
Greg Bergé
✨ 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
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!
sreejith
So happy to see @mannupaaji work being recognised 🥹🤌🏻♥️ His work is literally a treasure trove for devs 💎
Rajdeep Seth
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
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
Dhanush Vardhan Kalaiselvan
@aceternitylabs is just awesome, added some of its elements in my portfolio website
Rajdeep Seth
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
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
Dhanush Vardhan Kalaiselvan
@aceternitylabs is just awesome, added some of its elements in my portfolio website
sreejith
So happy to see @mannupaaji work being recognised 🥹🤌🏻♥️ His work is literally a treasure trove for devs 💎
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!
sreejith
So happy to see @mannupaaji work being recognised 🥹🤌🏻♥️ His work is literally a treasure trove for devs 💎
Featured by popular YouTubers
See what the best YouTubers are saying about Aceternity UI.
Jeff from talks about how Aceternity UI can help you build awesome landing pages with speed
Watch build an entire SaaS application from scratch with Aceternity UI
Josh from talks about how Aceternity UI components can help your website stand out.
Watch build an entire website from scratch with Aceternity UI
Adrian from talks about Aceternity UI and how to use the components efficiently
Adrian from creates an entire portfolio website with amazing details and beautiful UI with Aceternity UI
Watch 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.
Ever growing collection of components to help you ship more website features faster
Beautiful, modern and best templates to help you stand out from the crowd.
Get the latest components and templates forever with our lifetime updates. No extra fees.