--- title: "35 Ready-to-Use UI Component and Animation Libraries for AI Products" description: "A living collection of React components, animations, shaders, and AI-native UI patterns with ready-to-use code." slug: ui-components-and-animations-for-ai-products publishDate: 2026-09-20 author: Igor Dobzhanskiy tags: [AI Tools, React, UI Components, Animations] --- Ready-made React components, animations, shaders, and AI-native patterns you can add manually or hand off to a coding agent—without endlessly searching through bookmarks. AI can write a component from scratch, but it is often faster to give it a strong, ready-made example. This collection helps you find the right foundation—from a small micro-interaction to a complete AI agent interface. > **This is a living collection.** I will update the list regularly, adding new libraries, individual components, and tools whenever I find something genuinely worth sharing. ## Large component libraries ### 1. React Bits [React Bits](https://www.reactbits.dev/animations/splash-cursor) — a large collection of React components: text animations, cursors, backgrounds, galleries, cards, and shaders. Splash Cursor is a vivid interactive cursor effect. ### 2. Lightswind UI [Lightswind UI](https://lightswind.com/) — an extensive library of React components, UI blocks, and templates. It is especially strong in 3D, WebGL, AI interfaces, hero sections, and dashboard components. ### 3. Aceternity UI [Aceternity UI](https://ui.aceternity.com/components) — popular React and Next.js components with spotlight effects, parallax, 3D cards, and complex hero sections. ### 4. Magic UI [Magic UI](https://magicui.design/docs/components) — a set of animated components for landing pages and SaaS products, compatible with React, Tailwind, and the shadcn/ui approach. ### 5. Motion Primitives [Motion Primitives](https://motion-primitives.com/docs) — open-source animation primitives built with Motion and Tailwind CSS for element reveals, morphing transitions, text effects, and magnetic interactions. ### 6. Uiverse [Uiverse](https://uiverse.io/elements) — a large community gallery of CSS and Tailwind buttons, loaders, inputs, cards, and toggle components. Useful for quickly adding small interface details. ### 7. Originkit [Originkit](https://www.originkit.dev/) — a library of animated components with visual and AI editors, code export, and MCP access for coding agents. ### 8. 21st.dev [21st.dev](https://21st.dev/community/components) — a large community platform for React and Next.js components: hero sections, shaders, AI chat UI, dashboards, buttons, timelines, and other ready-to-use solutions. ### 9. Watermelon UI [Watermelon UI](https://ui.watermelon.sh/home) — an open-source platform with components, blocks, dashboards, templates, and showcase pages. It also provides machine-readable resources and MCP support for AI agents. ### 10. OpenSource UI [OpenSource UI](https://opensourceui.in/components) — a large collection of React and Next.js components, ranging from forms and buttons to widgets, mockups, backgrounds, and social interfaces. ### 11. Kokonut UI [Kokonut UI](https://kokonutui.com/docs) — components for React, Tailwind, and Motion with a shadcn registry. It supports MCP, so resources can be installed through Codex, Cursor, or Claude Code. ### 12. Spectrum UI [Spectrum UI](https://ui.spectrumhq.in/docs) — a copy-paste library for React, Next.js, Tailwind, Motion, and shadcn/ui. It includes an AI Chat Card, animated drawer, charts, tables, and MCP integration. ### 13. UI-Layouts [UI-Layouts](https://www.ui-layouts.com/components) — an open-source collection of accessible, customizable copy-paste components: visual effects, motion, overlays, forms, galleries, 3D elements, and code viewers. It also offers MCP and LLM-friendly documentation. ### 14. BuouUI [BuouUI](https://buouui.com/docs) — a library of 100+ animated React and TypeScript components built with Tailwind CSS and Framer Motion. Code can be copied directly, and the components fit the shadcn/ui ecosystem. ## Animations and micro-interactions ### 15. Motion Core — Water Ripple [Motion Core](https://motion-core.dev/docs/water-ripple) — a lightweight animation component library. Water Ripple adds an interactive image distortion that resembles ripples on water. ### 16. Nyx UI [Nyx UI](https://nyxui.com/components) — creative React components for landing pages: cyberpunk cards, matrix rain, water ripple, custom cursors, 3D cards, and animated text. ### 17. Cursify [Cursify](https://cursify.ui-layouts.com/components) — a specialized library of cursor effects for React: fluid, blob, rainbow, trail, magnetic, spotlight, and WebGL cursors. ### 18. Amicro — Mono Charts [Amicro](https://amicro.vercel.app/mono-charts) — a collection of premium micro-interactions built with React and Motion. Mono Charts offers restrained animated charts for dashboard interfaces. ### 19. MeetUI — Blur Reveal [MeetUI](https://meetui.dev/components/blur-reveal) — a collection of text animations, cursor interactions, loaders, cards, and carousels. Blur Reveal is useful for softly revealing headlines and content. ### 20. Fancy Components [Fancy Components](https://www.fancycomponents.dev/docs/introduction) — free experimental components and micro-interactions built with React, TypeScript, Tailwind, and Motion: physics, image trails, variable fonts, and SVG filters. ### 21. beUI [beUI](https://beui.dev/docs/motion-patterns) — copy-paste motion components for React and Next.js with spring animations. Standout examples include Dynamic Island, a morphing modal, a dock, and a theme transition. ### 22. ObsidianUI [ObsidianUI](https://www.obsidianui.dev/components#component-gallery) — interactive React components built with Tailwind and Motion: draggable marquee, parallax gallery, scroll stack, SVG reveals, and cursor effects. ### 23. Apple Carousel by Chánh Đại [Apple Carousel](https://chanhdai.com/components/apple-carousel) — a polished recreation of an Apple-style carousel with smoothly expanding cards and cinematic transitions. ### 24. devl.dev [devl.dev](https://www.devl.dev/) — a collection of UI experiments made with raw CSS, SVG, canvas, and shaders. It is more of an idea laboratory than a traditional component library. ### 25. Anime.js [Anime.js](https://animejs.com/documentation/getting-started) — a JavaScript animation engine for timelines, SVG, DOM, canvas, and complex element choreography. It is a foundation for custom effects rather than a ready-made React library. ### 26. Loading UI [Loading UI](https://loading-ui.com/) — a free, open-source collection of loaders, spinners, skeletons, and loading states with components ready to copy. ### 27. Unlumen UI [Unlumen UI](https://ui.unlumen.com/components) — refined motion components with 3D effects, image interactions, animated navigation, shaders, and SVG icons. Both Free and Pro options are available. ### 28. Skiper UI [Skiper UI](https://skiper-ui.com/components) — highly polished copy-paste components with smooth animations for modern landing pages and product interfaces. ## 3D and shaders ### 29. ThreeUI [ThreeUI](https://threeui.com/) — components, templates, and interactive Three.js shaders. A good fit for immersive hero sections, 3D objects, and unconventional product showcases. ### 30. Vanta.js [Vanta.js](https://www.vantajs.com/) — ready-made interactive 3D backgrounds built with Three.js or p5.js and added with only a few lines of code. The effects respond to the cursor and touch, while colors and behavior can be adapted to a brand. A static fallback is recommended for mobile. ### 31. Paper Shaders [Paper Shaders](https://shaders.paper.design/) — an ultra-fast collection of zero-dependency shader components for React, including image filters, logo animations, mesh gradients, noise, distortions, and other expressive effects. It is available as a dedicated npm package. ## Components made specifically for AI products ### 32. Beautiful UI [Beautiful UI](https://www.beautifului.dev/) — thoughtful primitives for AI-native interfaces: thinking states, streaming text, approval cards, tool calls, task rows, citations, and agent screens. ### 33. AICSS [AICSS](https://www.aicss.dev/#components) — ready-made blocks for what an AI agent displays during a conversation: reasoning, file diffs, tool activity, code, tables, approvals, and structured outputs. ### 34. UI by Halaska [UI by Halaska](https://ui.halaska.com/) — a UI kit for AI products built around chat and canvas paradigms. It includes UX patterns for streaming, approvals, tool activity, recovery, and agent control. ## Data visualization ### 35. Evil Charts [Evil Charts](https://evilcharts.com/docs) — an open-source set of design-led charts for shadcn/ui. Components are available for Recharts and Apache ECharts, with gradients, glow, and reveal animations. ## The collection keeps growing Bookmark this page and come back later. If you know a library or component that belongs here, [send me the link](https://t.me/dobzha_pro_design)—after reviewing it, I will add it in a future update.