Skip to content
Edit this page

Usage

Learn the basics of working with Joy UI components.

Quickstart

The following code snippet demonstrates a simple app that uses the Joy UI Button component:

import * as React from 'react';
import { CssVarsProvider } from '@mui/joy/styles';
import Button from '@mui/joy/Button';

export default function MyApp() {
  return (
    <CssVarsProvider>
      <Button variant="solid">Hello World</Button>
    </CssVarsProvider>
  );
}

You can play around with this code in the interactive Code Sandbox demo below. Try changing the variant on the Button to soft to see how the style changes:

CssVarsProvider

In the Quickstart example above, you can see that the Button component is nested within <CssVarsProvider />. This provider unlocks a whole host of customization options powered by CSS variables. See Using CSS variables for more details.

Globals

Since Joy UI components are built to function in isolation, they don't require any kind of globally scoped styles. For a better user experience and developer experience, we recommend adding the following globals to your app.

Responsive meta tag

Joy UI is a mobile-first component library—we write code for mobile devices first, and then scale up the components as necessary using CSS media queries.

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head> element:

<meta name="viewport" content="initial-scale=1, width=device-width" />

CssBaseline

Joy UI provides an optional CssBaseline component. It fixes some inconsistencies across browsers and devices while providing resets that are better tailored to fit Joy UI than alternative global style sheets like normalize.css.

Default font

Joy UI uses the Public Sans font by default. See Installation—Public Sans font for complete details.