The joy of Joy UI: Why you should start using Material UI’s sister library

Photo by Jacqueline Munguía on Unsplash

For several years, I have built a plethora of web applications using Material UI. The exhaustive, easy-to-use library with beautiful components was a must for development. Applications looked cohesive and eye-catching until it… didn’t. I recently hit a wall, becoming bored with how my applications looked. After staring at the same components all these years, I was yearning for something fresher, sleeker, more modern but still easy-to-use like Material with customization capabilities. That’s when I came across Joy UI.

Joy UI is a sister library to Material UI. Though still in development, Joy contains many of the same components as Material already. So far, I have yet to not find a component I really needed for development in the Joy UI library. And the great thing about Joy UI, customization of components is easy, so other available components can quickly and effectively be transformed into what you are looking for.

Just like Material UI, the APIs are extremely detailed and easy to follow. For first time users of component libraries, this is just as easy to incorporate into your application as Material UI. And if you’re looking for a place to start, their templates are phenomenal.

Messages Template from https://mui.com/joy-ui/getting-started/templates/

The template above is just one of several provided on the Joy UI templates section on the Material UI website. All of the source code is provided for each template including all styling documents both for preview on CodeSandbox, and on GitHub ready to deploy. The previews on CodeSandbox are especially great to test and edit their templates to what you are looking for without wasting time and effort to install everything on your own project until you are sure about including it into your project. I have used their side panel NavBar from these templates a number of times as a foundation and transformed them into what I really wanted quickly and easily. And though small I especially love their color mode toggle incorporated into these templates. That is one component and feature in particular I have made use of quite often. It is these minimalistic but effective features included in this library that makes Joy UI feel very coherent, and sustainable for long-term development.

Speaking of color mode toggles, that brings me to one of the main reasons I love using Joy UI:

Dark Mode Optimization: Joy UI has built-in support for CSS variables which allows the user’s theming mode to be injected into the DOM before it is even rendered. In turn, there’s no flickering indicating a color change upon page load. This optimization allows for seamless color mode transition that leaves your application with a very polished look.

Other highlights of Joy UI include:

Figma Kit: Figma has been a game-changing tool for collaborative interface design. Of course, teams far and wide would have no good reason to make the switch to Joy UI is there was no Figma kit available for the library. But luckily, they don’t have to worry about that. Visit Joy UI for Figma to begin using it.

Out of the Box Beauty: And this just isn’t referring to how its components look (but lemme tell you, stunning! As the TikTokers would say: “Just looking like a wow!”) but how beautiful it makes the developer experience. The components are sleek and exhaustive enough to be used right as imported but can easily be styled using defined CSS variables that are easily identifiable in the component documentation. For example, checkout in the code snippet below how easy it is to utilize the CSS variables in the “sx” prop to quickly style the list and the list items:

        <List
          sx={{
            '--ListItem-radius': '8px',
            '--List-gap': '4px',
            '--List-nestedInsetStart': '40px',
          }}
        >
          <ListItem>
            <ListItemButton>
              <ListItemDecorator>
                <i data-feather="home" />
              </ListItemDecorator>
              <ListItemContent>Home</ListItemContent>
            </ListItemButton>
          </ListItem>
          <ListItem>
      </List>

Moreover, its components are supplemented with accessibility features as well. Overall, CSS no longer becomes a burden for the developer, allowing their creative juices for design to flow with minimal bounds and less time and effort required to make their design vision a reality.

Give Joy UI a shot, just a take it for a spin, and provide me your thoughts in the comments! I would love to hear them!

If you fall in love with it as much as I did and want to have a voice in their road to developing this beautiful library, be sure to visit their GitHub Issues.