Installation

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

Default installation

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, meaning you should ensure they are installed before installing Joy UI.

"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"
/>