Introduction

PaceUI Motion provides a curated collection of modern animated UI components and micro-interactions designed to elevate user experiences. Built on top of Framer Motion and Tailwind CSS, these components integrate directly into your React & Next.js applications using the shadcn CLI.

Why Motion Components?

• Fluid Micro-Interactions Engage users with interactive hover states, text animations, spring dynamics, and smooth layout transitions.
• Full Code Ownership Component source code lands directly in your codebase via the shadcn CLI with no external library lock-in.
• Performant & Responsive Hardware-accelerated CSS and Framer Motion animations optimized for high performance across all screen sizes.
• Customizable Design Easily adjust animation timings, physics parameters, colors, and layout props to fit your design system.

Getting Started

Add any motion component directly to your project using the shadcn CLI:

npx shadcn@latest @paceui/animated-stack

Explore the motion components in the sidebar to preview interactive demos, view code snippets, and check property references.