Installation

Install Joy UI, a library of beautifully designed React UI components.

Run one of the following commands to add Joy UI to your project:

npm install @mui/joy @emotion/react @emotion/styled

Peer dependencies

Please note that react and react-dom are peer dependencies too:

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
},

Inter font

Joy UI uses the Inter font by default. Add it to your project via Fontsource, or with the Google Fonts CDN.

Fontsource

Run one of the following commands to add Inter through Fontsource to your Joy UI project:

npm install @fontsource/inter

Then you can import it in your entry point like this:

import '@fontsource/inter';

Google Web Fonts

To install Inter through the Google Web Fonts CDN, add the following code inside your project's <head /> tag:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
/>