Docs

Introduction

Introduction

Ready-to-Use Animated Components for Modern Interfaces

Atlas UI is an open-source library of animated components powered by Motion (previously Framer Motion). It's designed to help developers build beautiful, fluid and sleek UIs with ease, whether you're using React, Next.js, or plain HTML with Vanilla JavaScript.

Atlas UI is inspired by libraries like shadcn/ui and Aceternity UI, blending clean, minimal design with expressive motion.

All React and Next.js components are built using Tailwind CSS, ensuring a modern development experience with full customizability.

Features

  • Motion-first animations: Atlas UI components are powered by Motion, providing smooth and fluid animations that enhance user experience.

  • Framework-ready: Atlas UI is designed to work seamlessly with React, Next.js, and plain HTML too, making it easy to integrate into your existing projects.

  • Copy-paste friendly: All components are designed to be easily copy-pasted into your projects. You can simply import the components you need and start using them right away.

  • Open source: Fully open-source, allowing you to customize and extend the components to fit your needs.

Composition

Atlas UI components are thoughtfully structured for flexibility, customization, and ease of use, no matter your tech stack.

React

  • Built with TypeScript for type safety and better developer experience
  • Styled using Tailwind CSS for utility-first design and full customizability
  • Powered by Motion for animations and transitions

These components are ideal for React or Next.js projects that want clean structure, expressive motion, and rapid development with Tailwind.

HTML

  • Built using plain HTML with Vanilla JavaScript
  • Animations and Transistions powered by Motion
  • Styled using vanilla CSS

These components are perfect for landing pages, marketing sites, or non-React apps where you want beautiful, animated UI without the overhead of a framework.