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.


Stay informed with our latest resources for building a SaaS

Subscribe to our newsletter to receive updatesor

Read more about

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.
Cover Image for A sneak peek at the Supabase and Next.js RSC SaaS kit

A sneak peek at the Supabase and Next.js RSC SaaS kit

·9 min read
A behind the scenes look at how we built the Supabase and Next.js RSC SaaS Starter.
Cover Image for Changelog: New Stripe Subscriptions Pages

Changelog: New Stripe Subscriptions Pages

·3 min read
We've redesigned the Makerkit subscriptions pages. Let's take a look at the new design.
Cover Image for Planning Makerkit's 2023

Planning Makerkit's 2023

·2 min read
A plan for the coming year at Makerkit. New kits, new blog posts, new documentation, courses, and more.
Cover Image for Introducing the Makerkit UI Storybook

Introducing the Makerkit UI Storybook

·2 min read
Announcing the Makerkit UI Storybook: a collection of all the components that make up the Makerkit kits. You can use this to see how the components work and to get inspiration for your own projects.
Cover Image for v0.5.0: Design Improvements and code-cleanup

v0.5.0: Design Improvements and code-cleanup

·2 min read
The version 0.5.0 adds improvements to the overall design, and adds Firebase Storage security rules backed by Firestore