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