005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
1.8 KiB
1.8 KiB
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
pnpm add @mui/joy @emotion/react @emotion/styled
yarn add @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 || ^19.0.0",
"react-dom": "^17.0.0 || ^18.0.0 || ^19.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
pnpm add @fontsource/inter
yarn add @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"
/>