<img src="https://media.daily.dev/image/upload/s--ksuXptw8--/f_auto/v1736344528/ugc/content_510775c5-f699-40a4-bf5f-d3bc4d42b62b" alt="Screenshot 2025-01-08 at 15.55.19">
<h1>How A Small Project Caught Wind</h1>
Last year when I launched what was then a pretty basic project called <a href="www.reactbits.dev/" target="_blank" rel="noopener nofollow">React Bits</a>, 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!
<h1>So, What Is React Bits?</h1>
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:
<img src="https://media.daily.dev/image/upload/s--NPOnIJfh--/f_auto/v1736344836/ugc/content_cb993187-dcfa-4776-8cd3-382c4eaf2a80" alt="Screenshot 2025-01-08 at 16.00.19">
<h1>Let’s Talk Components</h1>
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 <code>&lt;Ballpit /&gt;</code> component! Take a look:
<img src="https://media.daily.dev/image/upload/s--ma4D6sPd--/f_auto/v1736345033/ugc/content_487e47d9-8166-4975-80b1-d8ad2d3abb08" alt="Screenshot 2025-01-08 at 16.03.42">
This specific component uses Three.JS and lets you modify materials, physics, and many many other properties &amp; 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 <code>Hyperspeed</code>, <code>True Focus</code>, <code>Crosshair</code>, etc.
<img src="https://media.daily.dev/image/upload/s--pkoT6PcA--/f_auto/v1736346193/ugc/content_b40e96da-2ced-4918-a4f4-260b6b5a5f27" alt="Screenshot 2025-01-08 at 16.20.19">
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!
<h1>Future Steps &amp; Conclusions</h1>
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!
<h4>Docs: <a href="https://reactbits.dev/" target="_blank" rel="noopener nofollow">https://reactbits.dev/</a></h4>
<h4>GitHub: <a href="https://github.com/DavidHDev/react-bits" target="_blank" rel="noopener nofollow">https://github.com/DavidHDev/react-bits</a></h4>
See you around, and thanks for reading!

A safe place for React developers. Here you can find all kinds of topics related to React. Feel free to share your own :)

The React Community

React Bits is a library offering beautifully animated, flexible, and fun UI components for React developers. Initially launched as a small project, it quickly gained popularity with nearly 1,000 stars on GitHub in just over a week. The library supports various animation libraries like gsap, react-spring, and framer-motion, and offers versatile styling options. It includes unique components such as `<Ballpit />` and aims to expand to over 100 components, all free and open source. Improvements and additional features are continuously being added.

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