DEV Community

Cover image for NinjaBootstrap UI - A Pragmatic Approach To Bootstrap Reusable HTML Components
Giovanni Panasiti
Giovanni Panasiti

Posted on • Originally published at bootstrap.ninja

NinjaBootstrap UI - A Pragmatic Approach To Bootstrap Reusable HTML Components

I'm a backend developer long-established in the world of CSS frameworks with the only goal to ship my products faster and build UIs fast without losing focus on what matters the most to me as an engineer. I've always had a bit of a love/hate relationship with the tools of this trade since there's always too much complexity or something's missing depending on the tool itself.

https://youtu.be/UUuGCq4-9Mk

The framework I ended up using, very often, was Bootstrap. It was easy enough to integrate in my projects and I could easily deal with the few missing things. Then came TailwindUI, it caught my eye. Its well-crafted components had my heart and I started switching to Tailwind for almost any project just because of TailwindUI. It allowed me to have a beautiful UI without having to even think about it.

 

Day by day I was using Tailwind, and somehow I was still missing the old days of Bootstrap. This itch led me down a path of introspection. "Bootstrap, when dialed in just right, is an absolute goldmine" so I started building a team who would share my same vision and the first act was to release the NinjaBootstrap framework, an open-source fork of the original bootstrap with a few scss upgrades. We added the few utilities we felt bootstrap was missing. The idea wasn't to reinvent the wheel but to see if we could spin it with our own pace. And so, the NinjaBootstrap team was born—a collective of like-minded souls embarking on a journey to forge something akin to the craftsmanship of Bootstrap but with our unique spin, built on a foundation that draws inspiration from the best, yet it stands out as our magnum opus—a free tool recognized and appreciated by the giants in the industry.

Now the only real missing piece was the lovely crafted components that TailwindUI offers. We built a CSS Framework that was capable of reaching the same high-quality design but at the same time, we had nothing ready-made. At this point we could have given up, it was the easiest choice, but we decided to embark on an even more adventurous journey, and we're now thrilled to unveil our latest creation, a little gem we hope will resonate with you. Coupled with a CSS master and a UX expert we decided to build our own UI library.

So NinjaBootstrap UI was born. We started crafting component after component with a laser precision quality. Every component is baked by UX studies and pixel perfection. It's not just this. We based every component on the Bootstrap CSS variables so that they would blend in with any design configuration you have chosen.

Using our online customization tool you can even try to change the color variables and check new palettes right in your browser with our components. We even added AI to this so you don't have to come up with a nice palette, AI can do it for you.

Components page

This is a product crafted by developers, for developers. It's our way of giving back to the community, a token of our journey, and an invitation to explore the possibilities of web development without the constraints of traditional frameworks. With NinjaBootstrap UI, we're offering a couple of components on the house, a teaser of what's in store. If this catch your interest, I encourage you to dive deeper and check out the full video.

 

Pricing Components Showreel

 

Explore UI Kit

Top comments (2)

Collapse
 
underflow profile image
Steffen H. Nielsen • Edited

Awesome UI kit :D Will try it out :D

The UI overview is realy good, but i would love if it showed the actual result and not just the image of it. Also i wanted to see the responsiveness of the components, but with images i can't.

Collapse
 
giovapanasiti profile image
Giovanni Panasiti

Hi Steffen!!

the images are only for non-buyers, once you buy it you have full access on all the components. Our customers also have access to an APIKEY that would let them integrate our kit in the livecanvas editor (Wordpress) in order to have the easier integration possible.

To fix issue with responsiveness we have two screenshots one of the desktop and one of the mobile, so if you try to navigate form mobile you will see how the component actually looks like from mobile :-)

Thank you so much for the feedback!

(if you want to test it out every section has at least one free component)