Skip to content
Edit this page
+

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 is designed to use the Inter font by default. You may add it to your project with npm via Fontsource, or with the Google Fonts CDN.

npm install @fontsource/inter

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

import '@fontsource/inter';

Google Web Fonts

To install the Inter font in your project using the Google Web Fonts CDN, add the following code snippet 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/css?family=Inter:wght@300;400;500;600;700&display=swap"
/>