Animated UI Components for React and Next.js
This collection includes animated bento cards, motion-driven data visualizations, and interactive UI illustrations built with shadcn/ui, Motion, and Tailwind CSS. Every component is written in React and TypeScript, making it compatible with Next.js 13 and 14 App Router projects out of the box.
Where to Use These Components
Animated bento cards are commonly used in SaaS landing pages, product dashboards, marketing sections, and pricing pages. They provide a visually engaging way to present features, metrics, and data without relying on heavy third-party libraries. Components like animated charts, marquee sliders, and progress indicators are also well suited for admin dashboards and analytics interfaces.
Compatible Technologies
All components in this library are compatible with React 18, Next.js 14+, Tailwind CSS v3 and v4, and shadcn/ui. Animations are handled by Motion ( Motion), which supports both client and server components. The components also work with popular state management solutions like Zustand and React Query.
Copy, Paste, or Install via CLI
Each animated component can be copied directly into your project or installed using the shadcn CLI. This means you own the code and can customize animations, colors, and layout to match your design system. No configuration files or additional dependencies beyond what shadcn/ui already provides.