Skip to content
Edit this page

Joy UI - Overview

Joy UI is a library of beautifully designed React UI components.

Joy UI is a library of React UI components. It features foundational components such as the ones you'd find in Material UI. It comes with a beautifully designed default theme so you can rapidly start your own design system.

You should see Joy UI as your starting point. It includes a lot of customization features and the capability for you to match it to your desired look and feel.

Advantages of Joy UI

  • Ship faster: Joy UI gives you a significant amount of prebuilt components you need to develop web apps, with a sleek and carefully designed look and feel, allowing it to achieve a good-looking result without a dedicated designer.
  • Extensive customization: you're encouraged to customize each and every tiny piece of the Joy UI components so they match your desired design.
  • Accessibility in mind: Joy UI components are built on top of MUI Base unstyled components and low-level hooks, giving you support for several accessibility features out of the box. We do our best to make all components screen reader-friendly, and offer suggestions for optimizing accessibility throughout our documentation.

Principles

Keep it essential

Joy should work with the least amount of effort possible. We're striving for the essential only, both in the component API and design (look & feel). Components should have only what they need to do the job. What is considered essential will be drawn from MUI's experience over the years developing component libraries like this one, as well as from benchmarks of modern API and design guidelines—especially when it comes to developing web apps.

Looks great out-of-the-box

Joy needs to be simple yet characteristic. Visual attributes such as scale, size, and density should be consistent across all of the components so they live together nicely. We aim to spark delight with simplicity and attention to detail. You should feel like your UI looks great from the start.

Encourage creativity

We're aiming for Joy to be entirely customizable, and seen as a great starting point. This is meant to encourage you to extend, change, and revamp how Joy looks. Be creative by making it your own.

Focus on developer experience

A great developer experience is not only the quality of the code we ship but also how clear the documentation is, and what learning resources are available for developers. We hope that bundling it all together brings joy.

Joy UI vs. Material UI

Joy UI is meant to feature the same list of components you'd find in Material UI, with similar philosophy around component API and customization extensibility, but without the Material Design implementation.

If you ever wanted to use Material UI for the breadth of supported components, carefully written component API, and reliability of a tried and tested library but hesitated because of Material Design, Joy UI is here to solve that for you and act as the best alternative for that.