Many applications use 3rd-party component banks (like Bootstrap/Material-UI/Tailwind) for their UI. While this is a good solution for basic applications, as the list of requirements grows in size and complexity, these component banks become a burden and slow down the development.

This is because component banks cater to a very large audience, so they come packed with features that you mostly never use, and yet they never seem to cover all of your application's needs.

3rd-Party BankApp

Different applications have different users, and they each require their own unique user experience. This can only be delivered by developing your own set of UI components.

Developing Your Own Component Bank

Developing good UI components is very hard and time-consuming. Achieving the desired behavior is complex and sometimes requires you to wield magic-like tricks to overcome browser limitations. Moreover, making them "work" isn't enough - you also need to consider other aspects, like accessibility, performance, mobile-friendliness, and cross-browser support.

What if you could build your own, custom component bank, without having to worry too much about all these technicalities, and just focus on the presentation?

The Bricks of the Web

After building numerous UI components, we realized that there are many common challenges that can be solved once and reused everywhere.

We then extracted those solutions into a set of small, single-purpose components, each aimed at overcoming a specific UI challenge.

We call these components "the bricks of the web" - hence the name Webrix.

Webrix.jsUI ComponentsApp

Component banks can be thought of as the infrastructure of a UI application. Webrix is therefore the infrastructure of a component bank. With Webrix you can create a component bank that has exactly what you need, nothing more, nothing less.

Case in Point - DropDown

For example, if you want to build your own DropDown component, you can use

<Poppable/>
(for managing the DropDown placements and overflow recovery),
<Stackable/>
(for dynamically maintaining the stacking context) and
<ClickOutside/>
(for closing the DropDown when clicking outside of it):

StackableClickOutsidePoppableDropDown