Joy UI

What is Joy UI?

Joy UI (@mui/joy) is MUI's alternative component library that offers a modern, clean design language distinct from Google's Material Design. It is built from the ground up with CSS variables as a first-class feature, a flexible variant system, and a simpler API surface compared to Material UI.

npm install @mui/joy @emotion/react @emotion/styled
# or
pnpm add @mui/joy @emotion/react @emotion/styled

Joy UI shares MUI's engineering quality (accessibility, TypeScript, composability) but makes different design decisions:

• CSS variables by default -- not experimental, not opt-in
• Variant system -- every component supports solid, soft, outlined, plain
• Color system -- semantic colors (primary, neutral, danger, success, warning) instead of primary/secondary
• Decoration levels -- replaces Material UI's elevation with a more flexible concept
• Modern aesthetic -- rounded, spacious, contemporary look out of the box