KOMPOSE.
All resources
Web App

22 component and animation libraries

The problem it solves

Rebuilding a carousel, an accordion or a scroll reveal on every project means billing a client for a problem solved a thousand times already. These 22 libraries copy paste into a React or Next.js project and reach a level of polish most paid templates never do.

Component libraries

shadcn/ui is the base everything else plugs into: not a dependency but code you copy into your project and own. The others follow the same convention, so they all install with the same CLI. One warning about Aceternity: the components are spectacular but so recognisable that an informed visitor spots the library in three seconds. Use it on one block, never on a whole page.

https://ui.shadcn.com, https://www.cult-ui.com, https://skiper-ui.com, https://www.originkit.dev, https://magicui.design, https://ui.aceternity.com, https://www.reactbits.dev, https://21st.dev, https://motion-primitives.com, https://kokonutui.com, https://smoothui.dev, https://uiverse.io, https://www.hover.dev, https://tailwindcss.com/plus

  • reactbits.dev : React text effects and animations, JS or TS, CSS or Tailwind.
  • 21st.dev : Community component registry, with an MCP you can plug into your IDE.
  • motion-primitives.com : Clean, restrained motion building blocks, well suited to product UI.
  • kokonutui.com : Tailwind and shadcn components, lots of pricing and dashboard blocks.
  • smoothui.dev : Animated sections for marketing pages, with controlled motion logic.
  • uiverse.io : Buttons, cards and loaders in pure CSS. Works anywhere, React or not.
  • hover.dev : Hover micro interactions, ideal for the details that read as professional.
  • tailwindcss.com/plus : The official one, paid once. The most dependable for serious client work.

Animation, motion and 3D

This is the layer that separates a decent site from a memorable one, and it comes down to two things: the right easing curve and the right duration. GSAP remains the standard for complex sequences, and its formerly paid plugins are now free. Motion covers everything else in React. Lenis is three kilobytes and takes five lines to wire up, the best perceived effect per unit of effort on this whole list.

https://gsap.com, https://motion.dev, https://lenis.darkroom.engineering, https://easings.net, https://spline.design, https://www.unicorn.studio, https://rive.app, https://lottiefiles.com

  • rive.app : Very light interactive animations that react to cursor and state.
  • lottiefiles.com : Ready made vector animations, huge free catalogue.

The rule not to forget

A component library saves you time, it does not give you an identity. If you take the components as they are, your site will look like the thousand others that took them as they are. The work starts after installation: change the typeface, change the border radii, change the animation durations. Three changes are usually enough to make a component unrecognisable, and that is exactly what the client is paying for.

On the 3D and WebGL side, keep an eye on weight. A badly exported Spline scene can outweigh the entire rest of the site, and cost you in search ranking what it earns you in impression.

Take action

Want us to build your app?

These resources are a starting point. We can craft the custom web app that powers your product.

Book a callAbout us