---
name: Aceternity UI
slug: aceternity-ui
url: "https://dontmakeitugly.com/resources/aceternity-ui"
website: "https://ui.aceternity.com"
docs: "https://ui.aceternity.com/components"
type: component-library
categories:
  - components
  - motion
tags:
  - react
  - tailwind
  - motion
  - landing-pages
  - effects
  - "3d"
  - hero
frameworks:
  - react
  - nextjs
  - tailwind
pricing: freemium
agentFriendly: good
agentAccessMethods:
  - public_web
  - copy_paste
  - cli
difficulty: beginner
dateAdded: "2026-09-02"
lastVerified: "2026-09-02"
---

# Aceternity UI

Showy, copy-paste React components for landing pages that need a moment.

- Type: Component library
- Categories: Components, Motion
- Pricing: Freemium
- Works with: React, Next.js, Tailwind CSS, TypeScript, Motion

## What it is

Aceternity UI offers a large set of visually dramatic components: spotlight effects, 3D cards, background beams, animated tabs, hero sections. They are built with React, Tailwind and Motion and are meant to be copied into your project. A paid Pro tier adds templates and larger sections.

## Why it's here

Genuinely impressive effects, and beginners love it for good reason. The risk is overuse. Pick one signature effect for a hero and keep the rest of the page calm.

## Best for

- hero sections
- landing pages
- portfolio sites
- visual impact

## Links

- Website: https://ui.aceternity.com
- Docs: https://ui.aceternity.com/components

## Can my agent use this?

Mostly. The free components show their full source on the site, and many can be added via the shadcn CLI. Link your agent directly to the component page you want.

Agent friendliness: Good. Publicly accessible and useful to reference, but the agent will need to interpret it rather than install it.
Access methods: Public website, Copy/paste, CLI.

## Prompt to hand your agent

```text
Use Aceternity UI as a design and implementation reference for this project.

What it is: Showy, copy-paste React components for landing pages that need a moment.

Website: https://ui.aceternity.com
Documentation: https://ui.aceternity.com/components

Use it specifically for:
- hero sections
- landing pages
- portfolio sites
- visual impact

How you can access it: Public website, Copy/paste, CLI.
Works with: React, Next.js, Tailwind CSS.

Read the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource.
```

## Related

- [Magic UI](https://dontmakeitugly.com/resources/magic-ui.md): Animated React components and effects for landing pages, built to sit alongside shadcn/ui.
- [Liquid Logo](https://dontmakeitugly.com/resources/liquid-logo.md): Drop in your logo and get it back as flowing liquid metal, rendered live with shaders.
- [Origin UI](https://dontmakeitugly.com/resources/origin-ui.md): Hundreds of polished, practical components built on shadcn/ui conventions.
- [Tailwind Plus](https://dontmakeitugly.com/resources/tailwind-plus.md): The official paid Tailwind component and template catalogue (formerly Tailwind UI).

## In collections

- [Make your landing page better](https://dontmakeitugly.com/collections/better-landing-pages.md)

Aceternity UI is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.