Skip to content

Aceternity UI

Aceternity UI offers React components and animated effects for web pages. Check what the chosen example adds and keep your app’s essential controls usable without animation.

Visit Aceternity UI

What should you use Aceternity UI to change?

Start with a visible change you can describe, such as how a confirmation panel enters the screen. Keep the confirmation words and what the two choices do clear before adding movement.

Aceternity UI supplies React source examples. Its setup uses Tailwind styles and a helper for combining style classes. Animated items can need Motion, the package that controls how an element moves. Check the instructions for the item rather than adding every dependency to the project.

What does the Animated Modal example handle?

The Animated Modal source provides a trigger, an animated panel and pointer dismissal. If you use its appearance for a confirmation, connect that appearance to a dialog that manages keyboard focus and tells a screen reader what the dialog is.

The published item source includes a close icon and outside-click handling. The file leaves accessible naming, moving focus into the dialog, Escape and returning focus to the opener to your integration. Give the close button a readable name and verify those behaviors in the finished component.

Compare the effect on a disposable display-choice screen. Cancel and Escape should leave the choice unchanged. Confirm should update only the fake choice. Repeat with reduced motion and keep the same result if you remove the effect.

What does paid access buy?

You can browse public examples first. If you need a component or template from the paid collection, check the offer for that specific item and the access term you want.

In November 2026, the site listed a one-time US$169 payment for the one-year license and a one-time US$199 payment for lifetime access. Those offers cover the component and template collection. Check the current terms for updates, renewal and the work you plan to do.

The Aceternity License lets you modify a covered item and use it in a finished website or app for yourself or a client. It prohibits redistributing the item’s source files, even if you changed them, and selling or sharing templates based on the item through a marketplace. Check the exact item terms and any separate licenses for third-party components and demo media.

How do you keep the effect working after changes?

Keep the copied file in your project and separate the animation from the action it illustrates. That gives you a smaller piece to revise if the styles, Motion version or design changes.

Keep a clean version of the screen without the effect so you can compare behavior. If you bring in a later version, compare the new file with your copy before replacing it. Check that the choices still fit on a phone and are easy to reach without a mouse.