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 a new documentation generator for the Supabase Kits

Announcing a new documentation generator for the Supabase Kits

·3 min read
We're excited to announce a new documentation generator for the Supabase Kits. This will make it easier for you to build your own documentation site for your Makerkit SaaS.
Cover Image for Introducing the Makerkit Super Admin

Introducing the Makerkit Super Admin

·4 min read
The Makerkit Super Admin is an admin panel for SaaS applications built with Makerkit. It allows you to manage your users, subscriptions, and more.
Cover Image for Upcoming changes to Makerkit in Summer 2023

Upcoming changes to Makerkit in Summer 2023

·3 min read
An overview of the changes coming to MakerKit in Summer 2023.
Cover Image for Introducing Makerkit Lite: a lightweight Next.js SaaS Boilerplate

Introducing Makerkit Lite: a lightweight Next.js SaaS Boilerplate

·3 min read
Introducing Makerkit Lite: a lightweight SaaS Boilerplate built with Next.js and Supabase. It is a smaller, faster and simpler version that the original Makerkit template.
Cover Image for Announcing: Makerkit now supports Lemon Squeezy subscriptions! 🍋

Announcing: Makerkit now supports Lemon Squeezy subscriptions! 🍋

·2 min read
Announcing support for Lemon Squeezy subscriptions in Makerkit. It's now possible to use a MoR to power your Makerkit app.
Cover Image for Announcing support for Multi-Factor Authentication (MFA) with Supabase

Announcing support for Multi-Factor Authentication (MFA) with Supabase

·3 min read
A sneak peek to our coming feature for Multi-Factor Authentication (MFA) with Supabase.