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 — 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 — 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 — popular React and Next.js components with spotlight effects, parallax, 3D cards, and complex hero sections.
4. Magic UI
Magic UI — 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 — open-source animation primitives built with Motion and Tailwind CSS for element reveals, morphing transitions, text effects, and magnetic interactions.
6. Uiverse
Uiverse — 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 — a library of animated components with visual and AI editors, code export, and MCP access for coding agents.
8. 21st.dev
21st.dev — 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 — 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 — 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 — 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 — 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 — 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 — 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 — a lightweight animation component library. Water Ripple adds an interactive image distortion that resembles ripples on water.
16. Nyx UI
Nyx UI — creative React components for landing pages: cyberpunk cards, matrix rain, water ripple, custom cursors, 3D cards, and animated text.
17. Cursify
Cursify — a specialized library of cursor effects for React: fluid, blob, rainbow, trail, magnetic, spotlight, and WebGL cursors.
18. Amicro — Mono Charts
Amicro — 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 — 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 — free experimental components and micro-interactions built with React, TypeScript, Tailwind, and Motion: physics, image trails, variable fonts, and SVG filters.
21. beUI
beUI — 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 — 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 — a polished recreation of an Apple-style carousel with smoothly expanding cards and cinematic transitions.
24. devl.dev
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 — 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 — a free, open-source collection of loaders, spinners, skeletons, and loading states with components ready to copy.
27. Unlumen UI
Unlumen UI — 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 — highly polished copy-paste components with smooth animations for modern landing pages and product interfaces.
3D and shaders
29. ThreeUI
ThreeUI — 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 — 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 — 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 — thoughtful primitives for AI-native interfaces: thinking states, streaming text, approval cards, tool calls, task rows, citations, and agent screens.
33. AICSS
AICSS — 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 — 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 — 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—after reviewing it, I will add it in a future update.