Aceternity UI

Language: JavaScript

UI Framework

Inspired by shadcn/ui, Aceternity UI was created by Manu Arora (Mannupaaji) to let developers quickly add breathtaking animations—like dynamic cards, background effects, and interactive components—to their projects by simply copying source code. It's gained popularity for its visual flair and ease of integration in React/Next.js environments. [oai_citation:0‡Medium](https://piyush-dubey.medium.com/is-aceternity-ui-worth-the-hype-99b6594daf90?utm_source=chatgpt.com) [oai_citation:1‡Medium](https://medium.com/%40salman.faraj06/a-comprehensive-guide-to-using-the-typescript-based-trending-component-library-aceternity-ui-with-50618402b91b?utm_source=chatgpt.com) [oai_citation:2‡YouTube](https://www.youtube.com/watch?v=Bs9i35nTUg4&utm_source=chatgpt.com)

Aceternity UI is a modern component collection built with Next.js, React, Tailwind CSS, and Framer Motion. It offers stunning animated effects and copy-and-paste components (no npm package required), perfect for visually engaging UI buildouts.

Installation

cli: Use the provided CLI or manually copy component source code from the Aceternity UI website.

dependencies:

Typically requires Tailwind CSS, Framer Motion, clsx, tw-merge (e.g. via `npm i motion clsx tailwind-merge @tabler/icons-react cobe`). [oai_citation:3‡ui.aceternity.com](https://ui.aceternity.com/components/feature-sections?utm_source=chatgpt.com)

import: No npm installation; components are copied into your codebase directly.

Usage

Provides a wide range of animated UI components—such as 3D cards, tooltips, carousels, background effects, loaders, and more—designed for React/Next.js with Tailwind and Framer Motion. Use the live playground to test and grab code snippets. [oai_citation:4‡ui.aceternity.com](https://ui.aceternity.com/components?utm_source=chatgpt.com)

Copy-Paste Component

// Visit the Playground → select a component → copy the JSX/TS code into your components/ui folder
import { MyCard } from "components/ui/MyCard";
<MyCard />

Demonstrates how you add a component by copying source code and using it locally—no installation needed.

Integrating 3D Card or Animated Tooltip

// Copy the component code (e.g., 3D Card) and its accompanying utils/style from the Aceternity UI site.
import { ThreeDCard } from "components/ui/ThreeDCard";

function Hero() {
  return <ThreeDCard title="Hello" description="3D effect in action" />;
}

Shows how to integrate a specific animated component from Aceternity UI into your page.

Using the Playground

// Navigate to the Aceternity UI Playground, experiment with component props and copy the live code directly into your project.

Leverage the online playground to customize components before adding them to your codebase.

Error Handling

Component not rendering or broken animation: Check that dependencies (Tailwind, Framer Motion, clsx, tw-merge) are installed and configured properly.

Missing utility function `cn`: Add the `cn` helper function (`clsx` + `tw-merge`) as shown in Aceternity UI setup guidelines. [oai_citation:7‡ui.aceternity.com](https://ui.aceternity.com/components/feature-sections?utm_source=chatgpt.com) [oai_citation:8‡Medium](https://medium.com/%40salman.faraj06/a-comprehensive-guide-to-using-the-typescript-based-trending-component-library-aceternity-ui-with-50618402b91b?utm_source=chatgpt.com)

GlobalConfig or asset missing: Ensure that required config files or assets (like data.json) are copied if component relies on them (e.g. GitHub Globe example). [oai_citation:9‡Reddit](https://www.reddit.com/r/react/comments/1ll2vs8/can_anyone_help_me_using_aceternity_ui_library/?utm_source=chatgpt.com)

Best Practices

Use Vite or Next.js + Tailwind + Framer Motion setup for best compatibility.

Organize components under `components/ui` for clarity.

Ensure required utilities (`cn`, Tailwind setup, etc.) are available per setup guides. [oai_citation:5‡ui.aceternity.com](https://ui.aceternity.com/components/feature-sections?utm_source=chatgpt.com) [oai_citation:6‡Medium](https://medium.com/%40salman.faraj06/a-comprehensive-guide-to-using-the-typescript-based-trending-component-library-aceternity-ui-with-50618402b91b?utm_source=chatgpt.com)

Use the live playground to test and copy code snippets for perfect integration.

Stay mindful of keeping the source code updated manually since components aren’t pulled via npm.

Official Docs Github