Skip to content
🚀 MUI X v6 is out! Discover what's new and get started now!
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

<span class="token function">npm</span> <span class="token function">install</span> @mui/joy @emotion/react @emotion/styled

yarn

<span class="token function">yarn</span> <span class="token function">add</span> @mui/joy @emotion/react @emotion/styled

Peer dependencies

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

<span class="token property">"peerDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token property">"react"</span><span class="token operator">:</span> <span class="token string">"^17.0.0 || ^18.0.0"</span><span class="token punctuation">,</span>
  <span class="token property">"react-dom"</span><span class="token operator">:</span> <span class="token string">"^17.0.0 || ^18.0.0"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>

Public Sans font

Joy UI is designed to use the Public Sans font by default. You may add it to your project with npm or yarn via Fontsource, or with the Google Fonts CDN.

npm

<span class="token function">npm</span> <span class="token function">install</span> @fontsource/public-sans

yarn

<span class="token function">yarn</span> <span class="token function">add</span> @fontsource/public-sans

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

<span class="token keyword">import</span> <span class="token string">'@fontsource/public-sans'</span><span class="token punctuation">;</span>

Google Web Fonts

To install the Public Sans font in your project using the Google Web Fonts CDN, add the following code snippet inside your project's <head /> tag:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span>
  <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span>
  <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://fonts.googleapis.com/css?family=Public+Sans&amp;display=swap<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span>