Quickly learn how to create a login page using Joy UI components.
+
Learn how to import and style Joy UI components to build a simple login page with light and dark modes.
-In this small tutorial, you'll learn how to:
+This tutorial will walk you through how to assemble the UI for a basic login page using Joy UI.
+You'll be introduced to several common components as well as some of the props you can use to control their styles.
+You'll also encounter key features of Joy UI such as global variants, the `sx` prop, and the `useColorScheme` hook.
-1. Import Joy UI components.
-2. Build a basic login page with them.
-3. Toggle light and dark mode.
+By the end, you should understand how to:
-The only **prerequesite** is [having Joy UI installed](/joy-ui/getting-started/installation/).
+1. import and customize Joy UI components
+2. add styles to Joy UI components with `sx`
+3. override default HTML elements with `component`
+4. toggle light and dark mode with `useColorScheme`
-:::warning
-⚠️ **Note:** We won't cover theming and general component customization at this moment.
-Learn more about [the different customization approaches](/joy-ui/customization/approaches/) later.
-:::
+## Interactive demo
+
+Here's what the final product looks like—click on the **< >** icon underneath the demo to see the full source code:
+
+{{"demo": "LoginFinal.js", "hideToolbar": false, "bg": true}}
+
+## Prerequisites
-## Building the login page
+This tutorial assumes that you've already:
-### 1. Creating the basic layout
+- set up a React app—try [Create React App](https://create-react-app.dev/) if you need a boilerplate
+- installed Joy UI in your app—see [Installation](/joy-ui/getting-started/installation/) for instructions
-To create the structure for the login page, we'll use the `Sheet` component, which is simply an HTML div that supports the global variant feature.
+## Import the Sheet component for structure
-Try playing around with different variant values to see how they look like.
-You can use `solid`, `soft`, `outlined`, or `plain`.
+The [Sheet](/joy-ui/react-sheet/) component is a `
` container that supports Joy UI's [global variants feature](/joy-ui/main-features/global-variants/), helping to ensure consistency across your app.
+
+Import Sheet and add it to your app as shown below.
+(If you're using Create React App, for example, all of this code should go in `App.js`.)
+Notice that Joy UI components must be nested within ``:
```jsx
+import * as React from 'react';
import { CssVarsProvider } from '@mui/joy/styles';
import Sheet from '@mui/joy/Sheet';
-function App() {
+export default function App() {
return (
Welcome!
);
}
-
-export default App;
```
-:::info
-**Don't forget:** always render Joy UI components inside the `` component.
+:::success
+Try playing around with different `variant` values to see the available styles.
+In addition to `outlined`, you can also use `solid`, `soft`, or `plain`—these are Joy UI's [global variants](/joy-ui/main-features/global-variants/), and they're available on all components.
:::
-### 2. Using the `sx` prop for quick styling
+### Add styles with the sx prop
-Every Joy UI component accepts the `sx` prop, which allows a shorthand syntax for writing CSS.
+All Joy UI components accept [the `sx` prop](/system/getting-started/the-sx-prop/), which gives you access to a shorthand syntax for writing CSS.
It's great for creating one-off customizations or rapidly experimenting with different styles.
+Replace your basic Sheet from the previous step with the following `sx`-styled Sheet:
+
```jsx
```
-Don't worry if you're confused about the `sx` prop's syntax at this moment.
-You'll get the hang of it as you use it more.
-Check the [MUI System's documentation](/system/getting-started/the-sx-prop/) to learn more about its foundation.
+:::success
+Try changing some of the values for the CSS properties above based on the patterns you observe.
+To go deeper, read about the `sx` prop in the [MUI System documentation](/system/getting-started/the-sx-prop/).
+:::
+
+## Add text with the Typography component
+
+The [Typography](/joy-ui/react-typography/) component replaces HTML header, paragraph, and span tags to help maintain a consistent hierarchy of text on the page.
+
+:::info
+The `level` prop gives you access to a pre-defined scale of typographic values.
+Joy UI provides 13 typographic levels out of the box:
-### 3. Using `Typography` to create a welcome text
+`display1 | display2 | h1 | h2 | h3 | h4 | h5 | h6 | body1 | body2 | body3 | body4 | body5`
-The `Typography` component supports the `level` prop, allowing you to choose between a pre-defined scale of typography values.
-Joy UI provides 13 typography levels out of the box: `display 1 | display 2 | h1 | h2 | h3 | h4 | h5 | h6 | body1 | body2 | body3 | body4 | body5`.
+:::
-You can also change which HTML tag gets rendered in each `Typography` component using the `component` prop.
+Add an import for Typography with the rest of your imports:
```jsx
-// ...other imports
import Typography from '@mui/joy/Typography';
+```
-
-
-
- Welcome!
-
- Sign in to continue
-
-;
+Replace `Welcome!` inside your Sheet component with this `
`:
+
+```jsx
+
+
+ Welcome!
+
+ Sign in to continue.
+
```
-### 4. Using `TextField` to create user name and password inputs
+:::success
+Try changing the values for the `level` and `component` props to see how they affect the typographic values and the elements rendered.
+(Note that while `level` only accepts the 13 values listed above, you can pass any HTML tag to `component`, as well as custom React components.)
+:::
+
+## Add Text Field for user inputs
-The `TextField` component is made of the `FormLabel`, `Input` and `FormHelperText` components.
+The [Text Field](/joy-ui/react-text-field/) component bundles together the Form Control, Form Label, Input, and Form Helper Text components to provide you with a sophisticated field for user input.
+
+Add an import for Text Field with the rest of your imports:
```jsx
-// ...other imports
import TextField from '@mui/joy/TextField';
+```
-
- ...typography
-
-
-;
+Insert these two Text Fields below the `
` from the previous step, inside the Sheet:
+
+```jsx
+
+
```
-### 5. Using `Button` and `Link` for actions
+## Import Button and Link for user actions
-The `Button` component has `solid` and `primary` as its default variant and color, respectively.
-Play around with changing their values to see how each variant differs from one another.
-Try `plain`, `outlined`, or `soft`.
+The [Button](/joy-ui/react-button/) and [Link](/joy-ui/react-link/) components replace the HTML `
+Sign up}
+ fontSize="sm"
+ sx={{ alignSelf: 'center' }}
+>
+ Don't have an account?
+
```
-
+## 🎁 Bonus: Build a toggle for light and dark mode
-## 🎁 Bonus: Setting up dark mode
+The `useColorScheme` hook aids in the implementation of a toggle button for switching between light and dark mode in an app.
+It also enables Joy UI to ensure that the user-selected mode (which is stored in `localStorage` by default) stays in sync across browser tabs.
-Joy UI provides an effortless way to toggle between modes by using the React hook `useColorScheme`.
-All you need to do is create a component that uses the hook and then render it under the `CssVarsProvider` component.
+Add `useColorScheme` to your import from `@mui/joy/styles`:
```jsx
-import React from 'react';
import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
-// ...other imports
+```
+
+Next, create a light/dark mode toggle button by adding the following code snippet in between your imports and your `App()`:
+```jsx
const ModeToggle = () => {
const { mode, setMode } = useColorScheme();
const [mounted, setMounted] = React.useState(false);
@@ -205,19 +220,46 @@ const ModeToggle = () => {
);
};
+```
-export default function App() {
+Finally, add your newly built `` button above ``:
+
+```diff
+ export default function App() {
return (
-
++ ...
);
}
```
-:::info
-💡 **Note:** With the `useColorScheme` hook, Joy UI ensures that the user selected mode (stored in localStorage by default) is in-sync across browser tabs.
-:::
+Your app should now look like the [interactive demo](#interactive-demo) at the top of the page.
+Great job making it all the way to the end!
+
+## Summary
+
+Here's a recap of the components used:
+
+- [Sheet](/joy-ui/react-sheet/)
+- [Typography](/joy-ui/react-typography/)
+- [Button](/joy-ui/react-button/)
+- [Link](/joy-ui/react-link/)
+- [Text Field](/joy-ui/react-text-field/)
+
+Here are some of the major features introduced:
+
+- [global variants](/joy-ui/main-features/global-variants/)
+- [the `sx` prop](/system/getting-started/the-sx-prop/)
+- [dark mode](/joy-ui/guides/applying-dark-mode/)
+
+## Next steps
+
+This tutorial does not cover theming or general component customization.
+Learn more about [different customization approaches](/joy-ui/customization/approaches/) and when to apply them.
+
+To see some more sophisticated examples of Joy UI in action, check out our [collection of templates](/joy-ui/getting-started/templates/).
-Congratulations 🎉! You've built your first good looking UI with Joy UI!
+Are you migrating from Material UI?
+Learn how to work with [Joy UI and Material UI together in one app](/joy-ui/guides/using-joy-ui-and-material-ui-together/).