Simpler UI Elements with Radix Primitives

When I first started building some pet projects to learn web development, a common pain point that I always kept experiencing was styling some of the native HTML elements.

You’ve also probably been there before, wondering why it’s so difficult to style those options inside of a select element. And if you do end up with someting half-decent, it looks different in another browser. And you can’t really do anything about it, because each browser has their own way of rendering HTML elements. That’s just how it is.

Thankfully though, component libraries exist! A component library is a collection of reusable user interface elements that you can use to ensure design consistency. This solves the dilemma I mentioned before, where we can instead use a component from this library which is consistent across browsers!

There are a ton of component libraries out there, and I haven’t done a deep dive on all of them. But for my own use, I’ve decided to go with Radix Primitives, an open-source component libary focused on accessibility, customization, and developer experience.

I like that it handles the accessibility for us. I’m certainly not an accessibility wizard just yet, so having components that adhere to the WAI-ARIA design patterns are a huge plus. The fact that it is unstyled is also great! This means that I can essentially style these components however I like.

Getting started with it is easy. To install Radix Primitives, simply run:

npm install radix-ui@latest

Now you can just import any component that you’d like. For example:

import { Select } from "radix-ui";

function Component() {
  <Select.Root>
    // The rest of the component's structure here
  </Select.Root>
}

A project I’ve been recently working on is a visualizer for contiguous memory allocation. I’ve been using it as an opportunity to practice TypeScript, but also to familiarize with using Radix Primitives. So far, I’ve used the Select and Dialog components and I’ve been happy with my experience using the library.

If you find this component library interesting, I’d suggest you take a look at their documentation and explore the components that the library has!