Makerkit ❤️ Radix UI

Makerkit migrated its UI Components to Radix UI, bringing a new look and feel to the platform.

·2 min read
Cover Image for Makerkit ❤️ Radix UI

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.



Read more about Changelog

Cover Image for Announcing the AI Blog Writer SaaS Template

Announcing the AI Blog Writer SaaS Template

·3 min read
We're excited to announce the launch of our latest SaaS template, the AI Blog Writer app template. This template is a great starting point for building a product to write SEO optimized blog posts using AI.
Cover Image for Announcing the AI Chat with PDF SaaS Template

Announcing the AI Chat with PDF SaaS Template

·3 min read
We're excited to announce the launch of our latest SaaS template, the Chat with PDF app template. This template is a great starting point for building a product that allows your customers to create chatbots that can answer questions and search through PDF documents.
Cover Image for Announcing the AI Chatbot SaaS Template

Announcing the AI Chatbot SaaS Template

·3 min read
We're excited to announce the launch of our latest SaaS template, the AI Chatbot SaaS Template. This template is a great starting point for building a customer support chatbot SaaS product.
Cover Image for Announcing Premium Codebase Access

Announcing Premium Codebase Access

·4 min read
We are excited to announce that we are now offering Premium Codebase Access to all our users on the Teams Plan.
Cover Image for Announcing the new Onboarding Flow!

Announcing the new Onboarding Flow!

·2 min read
The latest update to the SaaS Starter Kits is here! This update includes changes to the Onboarding Flow after sign-up.
Cover Image for November 2023 Update: AI Editor Plugin, Data Teardown, Stripe Embedded Checkout

November 2023 Update: AI Editor Plugin, Data Teardown, Stripe Embedded Checkout

·3 min read
The latest update to the SaaS Starter Kits is here! This update includes a new AI Editor plugin, user and organization teardown, and more!