Just launched v2.0

Beautiful UI Components with Aceternity UI

A modern UI component library with seamless animations, transitions, and effects that will elevate your website's user experience.

Explore Components View Documentation

1,200+ developers using Aceternity UI

Photo by Hunters Race

.card {

animation: float 4s;

}

Motion Components

Works perfectly with your favorite tools

React

Next.js

Tailwind CSS

Vue.js

Svelte

Features

Powerful components with beautiful animations to create stunning user interfaces.

Responsive UI Components

Build beautiful interfaces with our responsive, customizable components that work on any device.

Smooth Animations

Create engaging user experiences with fluid, natural-feeling animations that respond to user interactions.

Developer Friendly

Well-documented, easy to implement code with TypeScript support and copy-paste simplicity.

Accessibility First

Every component is fully accessible and follows WCAG guidelines for inclusive user experiences.

Themeable Design

Easily customize colors, spacing, and styles to match your brand's unique identity.

High Performance

Optimized for speed with minimal bundle size and zero dependencies to keep your site fast.

Seamless Design System

Create beautiful interfaces with our comprehensive set of pre-built components.

A group of people standing in a dark room

Photo by Neon Wang

Developer Friendly

Designed with developers in mind, our components are easy to implement and customize with clear documentation.

import { MotionCard } from 'aceternity-ui';

export default function App() {
  return (
    <MotionCard
      title="Easy to implement"
      description="Just import and use"
      variant="hover"
      animation="spring"
    />
  );
}

Simple, intuitive APIs that let you focus on building great experiences rather than fighting with implementation details.

Components

Beautiful, responsive components with seamless animations for your next project.

Photo by Yoga Sukma 🇮🇩

Stunning Visual Components

Create immersive user experiences with our visually striking components.

Hover Cards

Popular

Interactive cards with smooth hover effects and transitions.

24 variants

Animated Buttons

New

Buttons with fluid animations, hover states, and loading indicators.

18 variants

Modal Dialogs

Updated

Accessible modal dialogs with smooth transitions and backdrops.

12 variants

Form Inputs

Beautiful form inputs with validation states and interactive feedback.

32 variants

Navigation Menus

Responsive navigation components with smooth mobile transitions.

15 variants

Loading States

Elegant loading indicators and skeleton screens for any UI state.

20 variants

Component Playground

<button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors">
  Default Button
</button>

This modal demonstration showcases the smooth animations and accessibility features built into all of our components.

Preview Image 1

Preview Image 2

Features:

Smooth enter/exit animations
Focus trapping for accessibility
Keyboard navigation support
Escape key to close
Click outside to dismiss

import { Modal } from 'aceternity-ui';

function App() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Open Modal
      </button>
      
      <Modal 
        isOpen={isOpen} 
        onClose={() => setIsOpen(false)}
      >
        Modal Content Here
      </Modal>
    </>
  );
}

Animations

Fluid, natural motion that brings your UI to life.

Beautiful, Physics-Based Animations

Our animation library provides smooth, natural transitions inspired by physical motion. Enhance user experience with animations that respond naturally to user interactions.

Spring Animations

Physics-based spring animations create natural, life-like motion that responds organically to user interactions.

Staggered Animations

Create visually engaging sequences with elements that animate in succession, guiding the user's attention.

Configurable Parameters

Customize every aspect of your animations with intuitive parameters for timing, easing, and behavior.

Animation Examples

Explore our diverse range of animation styles for different UI elements and interactions.

Hover Reveal

Smooth transitions that reveal content on hover with adjustable timing.

Scroll Parallax

Create depth with elements that move at different speeds during scroll.

Reveal Text

Text Reveal

Elegant text animations that gracefully reveal content on page load.

Seamless Integration

Our animation library works flawlessly with popular frameworks and vanilla JavaScript. Simple API makes implementation quick and hassle-free.

import { animate, spring } from 'aceternity-ui';

// Simple spring animation
animate('#element', { 
  opacity: [0, 1],
  y: [50, 0]
}, {
  type: 'spring',
  stiffness: 100,
  damping: 10
});

Works with React, Vue, Angular and vanilla JS

Tiny footprint with zero dependencies

Automatic GPU acceleration for smooth performance

Supports reduced motion preferences

Photo by Ben Rosett

Testimonials

See what our users are saying about Aceternity UI.

Photo by Boxed Water Is Better

"Aceternity UI has been a game-changer for our team. The components are not only beautiful but also incredibly easy to implement. The animations feel natural and enhance our app's UX significantly."

Sarah Mitchell

Product Lead at Vercel

Loved by developers worldwide

"The animations in Aceternity UI are simply stunning. They're smooth, performant, and add that extra level of polish to our applications."

Jason Doe

Frontend Developer

"As a product designer, I appreciate the attention to detail in Aceternity UI. The components feel cohesive and the customization options are impressive."

Emily Lin

UX Designer

"Integration was seamless with our Next.js project. The documentation is clear and the support team is incredibly responsive."

Michael Johnson

CTO, Startify

"We switched from another UI library and haven't looked back. Aceternity UI has accelerated our development workflow by at least 40%."

Alex Petersen

Lead Developer, CodeSync

"The animations in Aceternity UI are simply stunning. They're smooth, performant, and add that extra level of polish to our applications."

Jason Doe

Frontend Developer

"The accessibility features in Aceternity UI saved us countless hours of work. Everything works out of the box with keyboard and screen readers."

Sophia Lee

Accessibility Specialist

"We've tried multiple UI libraries, but Aceternity UI stands out for its performance. Even complex animations run smoothly on mobile devices."

Ryan Kim

Mobile Developer

"Our design team loves how easily we can customize Aceternity UI components to match our brand identity while maintaining consistency."

Jessica Wong

Design Director, PixelPerfect

"The quality of Aceternity UI components has helped us ship features faster and with more confidence. Our users love the polished feel."

David Thompson

Product Manager, TechFlow

"The accessibility features in Aceternity UI saved us countless hours of work. Everything works out of the box with keyboard and screen readers."

Sophia Lee

Accessibility Specialist

Ready to elevate your user interface?

Join thousands of developers creating amazing experiences with Aceternity UI.

Get Started Today

Pricing

Choose the perfect plan for your needs with our simple, transparent pricing.

Monthly Annual Save 20%

Starter

$0 /month

Perfect for exploring and building simple projects.

Essential components
Basic animations
Community support
Premium components
Advanced animations

Pro

$29 /month

Ideal for professional developers and growing teams.

All essential components
Premium components
Advanced animations
Priority support
Source code access

Enterprise

$99 /month

For organizations requiring advanced features and support.

Everything in Pro plan
Custom component development
Dedicated support team
Enterprise SLA
Early access to new features

Compare Plans

Detailed comparison of what's included in each plan

Features	Starter	Pro	Enterprise
Components	20+	100+	200+ & Custom
Animations	Basic	Advanced	Custom
Source Code
Support	Community	Priority Email	Dedicated Team
Updates

person holding pencil near laptop computer

Photo by Scott Graham

Frequently Asked Questions

Have questions? We've got you covered.

Can I switch plans later?

Is there a free trial?

Do you offer refunds?

Ready to elevate your UI experience?

Start building beautiful interfaces with Aceternity UI today. Choose the plan that works for you and elevate your user experience.

Get Started View Documentation

FAQ

Answers to commonly asked questions about Aceternity UI.

What is Aceternity UI?

Is Aceternity UI compatible with my framework?

Do the components work with Tailwind CSS?

Are the components accessible?

Do you offer a free version?

Photo by Brooke Lark

Can I use Aceternity UI in commercial projects?

How do I customize component animations?

What support do you offer?

Do you offer refunds?

Still have questions?

Our team is here to help. If you can't find the answer you're looking for, please don't hesitate to reach out.

Contact Support

Ready to Build Beautiful Interfaces Without the Hassle?

Join thousands of developers using Aceternity UI to create stunning, responsive web experiences with minimal effort.

Get Started Now

"Aceternity UI revolutionized our development workflow. The beautiful components and smooth animations helped us deliver a premium user experience in half the time."

Sarah Mitchell

CTO at TechFlow

TRUSTED BY INNOVATIVE COMPANIES

Photo by Ben Rosett