Originally, Makerkit was built using Headless UI, a set of headless components built by the Tailwind team.
It was a great choice for a project like Makerkit, as it allowed us to build a UI library that was completely customizable, and that could be used in any project.
However, as Makerkit grew, we started to notice some limitations with Headless UI, highlighted by the fact many members of the community were asking for more components or to use Radix UI instead.
As a result, we decided to migrate Makerkit to Radix UI, a set of React UI components built the Modulz team, now at Work OS.
Why Radix UI?
Radix UI is a rich headless UI library that comes with many primitive components by default, with a strong focus on accessibility and usability. Additionally, it plays well with Tailwind CSS, which is a big plus for us.
Many of the components we added are an adaption of the Shadcn UI kit: a set of React UI components that are pre-styled with Tailwind CSS. If are planning on adding more components, I recommend you check it out.
What's new?
The new components added are:
- Dialog
- Dropdown
- Tooltip
As a result, we also removed some libraries such as Tippy, since no longer needed.
Preview
Below is a quick preview of some of the components we added to the Makerkit kits.
Select
Here is a preview of the new Select component - as shown in the Makerkit's Organizations selector:
Loading video...
Tooltip
We've removed Tippy in favor of the Tooltip component from Radix UI:
Loading video...
Dialog
The new Radix dialog behaves similarly to the previous one, but it's more customizable and has a better look and feel:
Loading video...
Other components
Now that we're using Radix UI, you can easily add more components to the library.
Install the library that you need and use the primitives using Radix UI, then follow the same conventions for decorating the primitives with Tailwind CSS.
Credits: Shad CN UI Template
A big thanks to Shad CN for creating the UI Template that we used as a base for the new components and adapted to the Makerkit look-and-feel.
My recommendation to clients wanting to build new components using Radix UI is to check out the UI Template, as it's a great starting point for decorating the Radix primitives using Tailwind CSS and re-exporting them.
