Introducing React Bits - A Library of Beautifully Animated React UI Components

David Haz — Wed, 08 Jan 2025 15:30:26 +0000

How A Small Project Caught Wind

Last year when I launched what was then a pretty basic project called React Bits, I thought that maybe a handful of people will find it helpful.

But.. here we are today with nearly 1,000 stars on GitHub, and this happened in just over one week! It might not seem like much compared to many other projects, but it's my first project that got this kind of support - so it's beyond anything I imagined, and I’m incredibly grateful for all the love and support from the community.

And for a fun fact, I actually set this up in approximately one day of work, using React, ChakraUI, and Vercel deployments for the actual documentation website, which is very very simple. Since then, it's grown pretty big, with now over 30 components, and more coming every day!

I've also invested time into making the documentation better, the demos more interactive, the components more configurable - you name it!

So, What Is React Bits?

React Bits is my honestly just a very basic project, but it's my take on making animated UI components simple, flexible, and fun for React developers.

Whether you’re into gsap, react-spring, or framer-motion, the library has a little taste of everything, without committing to a specific approach.

The same goes for Tailwind VS Vanilla CSS. There's no strings attached, because most of the finalized components allow you to copy code for your preferred method of styling.

Another thing, making static components is just not helpful to anybody, because you're going to have to go in and make a lot of changes if you want custom configurations. This is why I tried to add as many props and sliders and all kinds of tweak-able things inside all the components.

And if you don't believe me, I mean just take a look at this prop table:

Let's Talk Components

One main thing I want to offer with this library, is something I like to call "statement pieces" - meaning something that you just add to a website and make people go "Wow, that's cool!".

One example for this, for all the ball lovers in here, is the <Ballpit /> component! Take a look:

This specific component uses Three.JS and lets you modify materials, physics, and many many other properties & just like that, if you want to play with some balls on a website, you copy the code, configure your preferences, and it's done!

Now if you tilt your head sideways and look at this list, you'll see some other very funky names for components in here, like Hyperspeed, True Focus, Crosshair, etc.

They're all things you wouldn't typically find in most other libraries, because it's honestly a pain to set them up so that they become reusable React components haha!

Future Steps & Conclusions

My ultimate goal is to add 100+ unique components to this library, and of course, keep it all 100% free and open source. Since right now I'm about 30% of the way there, it's exciting to think what the final version of this will look like!

As for improvements to be made, I'm aware there is a lot to be done - like adding even more versatility, such as picking between JS and TS, which will again, respect the mission of having no strings attached to a specific architecture choice. That, and even more statement pieces are for sure coming soon!

I'll leave you with some links, and warm regards!

Docs: https://reactbits.dev/

GitHub: https://github.com/DavidHDev/react-bits

See you around, and thanks for reading!