Joy UI

https://mui.com/joy-ui/getting-started
Admin
Joy UI is an open-source React component library from MUI, offering a lightly opinionated design for...
Tokens:12,472
Snippets:36
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Joy UI with npm/yarn

Source: https://mui.com/joy-ui/getting-started/installation

Installs the Joy UI library along with necessary Emotion packages for styling. Ensure React and ReactDOM are installed as peer dependencies.

```bash
npm install @mui/joy @emotion/react @emotion/styled
```

--------------------------------

### Joy UI Peer Dependencies

Source: https://mui.com/joy-ui/getting-started/installation

Specifies the required React and ReactDOM versions that must be installed alongside Joy UI.

```json
{
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
  }
}
```

--------------------------------

### Use Joy UI Button Component

Source: https://mui.com/joy-ui/getting-started/usage

Demonstrates how to import and use the Joy UI Button component with a 'solid' variant. This is a basic example to get started with Joy UI.

```javascript
import * as React from 'react';
import Button from '@mui/joy/Button';

export default function ButtonUsage() {
  return <Button variant="solid">Hello world</Button>;
}
```

--------------------------------

### Install Inter Font with Fontsource

Source: https://mui.com/joy-ui/getting-started/installation

Adds the Inter font to your project using the Fontsource package manager.

```bash
npm install @fontsource/inter
```

--------------------------------

### Import Inter Font in Entry Point

Source: https://mui.com/joy-ui/getting-started/installation

Imports the Inter font from Fontsource into your application's main entry file.

```javascript
import '@fontsource/inter';
```

--------------------------------

### Add Inter Font via Google Fonts CDN

Source: https://mui.com/joy-ui/getting-started/installation

Includes the Inter font in your project by adding a link tag to the Google Fonts CDN in the `<head />` section of your HTML.

```html
<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"
/>
```

--------------------------------

### GitHub Issue Title Convention for Joy UI

Source: https://mui.com/joy-ui/getting-started/support

This snippet demonstrates the recommended format for GitHub issue titles when reporting bugs or suggesting features for Joy UI components. It emphasizes clarity and component specificity.

```Markdown
❌ _"It doesn't work"_
✅ _"[button] Add support for {{new feature}}"_
```

--------------------------------

### Joy UI Email Template

Source: https://mui.com/joy-ui/getting-started/templates

The Email template for Joy UI, built by MUI. This template can be used as a starting point for email client interfaces or notification systems.

```React.js
SourceCodeSandbox
```

--------------------------------

### FormControl Accessibility Example (Joy UI)

Source: https://mui.com/joy-ui/getting-started/index

Illustrates the accessibility features of Joy UI's FormControl component. It automatically generates unique IDs to link the Input, FormLabel, and FormHelperText components, ensuring compliance with accessibility guidelines.

```jsx
<FormControl>
  <FormLabel>Label</FormLabel>
  <Input placeholder="Placeholder" />
  <FormHelperText>This is a helper text.</FormHelperText>
</FormControl>
```

--------------------------------

### Joy UI Order Dashboard Template

Source: https://mui.com/joy-ui/getting-started/templates

The Order Dashboard template for Joy UI, built by MUI and designed by Untitled UI. It offers a starting point for e-commerce or order management applications.

```React.js
SourceCodeSandbox
```

--------------------------------

### Import Joy UI Button and Link Components

Source: https://mui.com/joy-ui/getting-started/tutorial

Imports Button and Link components from MUI Joy UI, which provide enhanced styling and functionality over standard HTML button and anchor tags.

```javascript
import Button from '@mui/joy/Button';
import Link from '@mui/joy/Link';
```

--------------------------------

### Style Sheet Component with sx Prop

Source: https://mui.com/joy-ui/getting-started/tutorial

Shows how to apply custom styles to the Joy UI Sheet component using the `sx` prop. This allows for one-off customizations and experimentation with CSS properties like width, margin, padding, display, gap, and border-radius.

```jsx
<Sheet
  sx={{
    width: 300,
    mx: 'auto', // margin left & right
    my: 4, // margin top & bottom
    py: 3, // padding top & bottom
    px: 2, // padding left & right
    display: 'flex',
    flexDirection: 'column',
    gap: 2,
    borderRadius: 'sm',
    boxShadow: 'md',
  }}
>
  Welcome!
</Sheet>
```

--------------------------------

### Add Login Button and Sign-up Link

Source: https://mui.com/joy-ui/getting-started/tutorial

Implements a 'Log in' button and a 'Don't have an account? Sign up' link using MUI Joy UI components. The sign-up link is nested within the Typography component's endDecorator prop.

```jsx
<Button sx={{ mt: 1 /* margin top */ }}>
  Log in
</Button>
<Typography
  endDecorator={<Link href="/sign-up">Sign up</Link>}
  fontSize="sm"
  sx={{ alignSelf: 'center' }}
>
  Don't have an account?
</Typography>
```

--------------------------------

### Import and Use Sheet Component with CssVarsProvider

Source: https://mui.com/joy-ui/getting-started/tutorial

Demonstrates how to import the Sheet and CssVarsProvider components from MUI Joy UI and use the Sheet with a 'outlined' variant. This sets up the basic structure for styling with global variants.

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

export default function App() {
  return (
    <CssVarsProvider>
      <Sheet variant="outlined">Welcome!</Sheet>
    </CssVarsProvider>
  );
}
```

--------------------------------

### Create Email and Password Input Fields

Source: https://mui.com/joy-ui/getting-started/tutorial

Defines JSX structure for email and password input fields using MUI Joy UI's FormControl, FormLabel, and Input components. Includes placeholders and type attributes for standard HTML input behavior.

```jsx
<FormControl>
  <FormLabel>Email</FormLabel>
  <Input
    // html input attribute
    name="email"
    type="email"
    placeholder="johndoe@email.com"
  />
</FormControl>
<FormControl>
  <FormLabel>Password</FormLabel>
  <Input
    name="password"
    type="password"
    placeholder="password"
  />
</FormControl>
```

--------------------------------

### Import Typography Component

Source: https://mui.com/joy-ui/getting-started/tutorial

Illustrates the import statement for the Typography component from MUI Joy UI, which is used for managing text hierarchy and styles within the application.

```jsx
import Typography from '@mui/joy/Typography';
```

--------------------------------

### Add Typography Components for Headings

Source: https://mui.com/joy-ui/getting-started/tutorial

Demonstrates how to use the Joy UI Typography component to render a main heading and a subheading. It shows the usage of the `level` prop for typographic scale and the `component` prop to override the default HTML element.

```jsx
<div>
  <Typography level="h4" component="h1">
    Welcome!
  </Typography>
  <Typography level="body-sm">Sign in to continue.</Typography>
</div>
```

--------------------------------

### Import Joy UI Form Components

Source: https://mui.com/joy-ui/getting-started/tutorial

Imports necessary components (FormControl, FormLabel, Input) from the MUI Joy UI library for creating user input fields.

```javascript
import FormControl from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import Input from '@mui/joy/Input';
```

--------------------------------

### Integrate Mode Toggle into App Component

Source: https://mui.com/joy-ui/getting-started/tutorial

Shows how to integrate the `ModeToggle` component into the main `App` component, placing it within the `CssVarsProvider` and before the main `Sheet` component.

```jsx
 export default function App() {
   return (
     <CssVarsProvider>
+      <ModeToggle />
       <Sheet>...</Sheet>
     </CssVarsProvider>
   );
 }
```

--------------------------------

### Import useColorScheme Hook for Mode Toggle

Source: https://mui.com/joy-ui/getting-started/tutorial

Imports the CssVarsProvider and useColorScheme hook from '@mui/joy/styles' to manage application theme modes (light/dark).

```javascript
import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
```

--------------------------------

### Implement Light/Dark Mode Toggle Component

Source: https://mui.com/joy-ui/getting-started/tutorial

Creates a React functional component `ModeToggle` that utilizes the `useColorScheme` hook to allow users to switch between light, dark, and system default modes via a Select dropdown. Includes a `useEffect` hook to handle server-side rendering compatibility.

```javascript
import Select from '@mui/joy/Select';
import Option from '@mui/joy/Option';

function ModeToggle() {
  const { mode, setMode } = useColorScheme();
  const [mounted, setMounted] = React.useState(false);

  // necessary for server-side rendering
  // because mode is undefined on the server
  React.useEffect(() => {
    setMounted(true);
  }, []);
  if (!mounted) {
    return null;
  }

  return (
    <Select
      value={mode}
      onChange={(event, newMode) => {
        setMode(newMode);
      }}
      sx={{ width: 'max-content' }}
    >
      <Option value="system">System</Option>
      <Option value="light">Light</Option>
      <Option value="dark">Dark</Option>
    </Select>
  );
}
```

--------------------------------

### Email Client Structure with MUI Joy UI

Source: https://mui.com/joy-ui/getting-started/templates/email

This snippet outlines the basic HTML structure for an email client, utilizing MUI Joy UI components for navigation, email list display, and message viewing. It serves as a foundational layout for the application.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My inbox</title>
    <!-- Link to MUI Joy UI CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mui/joy@5.0.0-beta.1/css/joy.css">
</head>
<body>
    <div class="email-client">
        <aside class="sidebar">
            <nav>
                <ul>
                    <li>Browse
                        <ul>
                            <li>Inbox</li>
                            <li>Sent</li>
                            <li>Draft</li>
                            <li>Flagged</li>
                            <li>Trash</li>
                        </ul>
                    </li>
                    <li>Tags
                        <ul>
                            <li>Personal</li>
                            <li>Work</li>
                            <li>Travels</li>
                            <li>Concert tickets</li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </aside>
        <main class="content">
            <header class="header">
                <h1>My inbox</h1>
                <p>5 emails</p>
                <button>Compose email</button>
            </header>
            <section class="email-list">
                <!-- Email list items will go here -->
            </section>
            <section class="email-view">
                <!-- Individual email view will go here -->
            </section>
        </main>
    </div>
</body>
</html>
```

--------------------------------

### Customer Order Summary

Source: https://mui.com/joy-ui/getting-started/templates/order-dashboard

This section displays a summary of individual orders, including customer name, email, order date, invoice number, and status. Each order also has a 'Download' button for accessing more details.

```html
* O
Olivia Ryhe
olivia@email.com
Feb 3, 2023•INV-1234
Download
Refunded

* S
Steve Hampton
steve.hamp@email.com
Feb 3, 2023•INV-1233
Download
Paid

* C
Ciaran Murray
ciaran.murray@email.com
Feb 3, 2023•INV-1232
Download
Refunded

* M
Maria Macdonald
maria.mc@email.com
Feb 3, 2023•INV-1231
Download
Refunded

* C
Charles Fulton
fulton@email.com
Feb 3, 2023•INV-1230
Download
Cancelled

* J
Jay Hooper
hooper@email.com
Feb 3, 2023•INV-1229
Download
Cancelled
```

--------------------------------

### Order Table Display

Source: https://mui.com/joy-ui/getting-started/templates/order-dashboard

This snippet demonstrates the HTML structure for displaying a table of orders. It includes columns for Invoice, Date, Status, and Customer, with functionality for downloading individual order details. The table is designed to be responsive and interactive.

```html
<table>
  <thead>
    <tr>
      <th>Invoice</th>
      <th>Date</th>
      <th>Status</th>
      <th>Customer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>INV-1234</td>
      <td>Feb 3, 2023</td>
      <td>Refunded</td>
      <td>OOlivia Ryheolivia@email.com</td>
      <td>Download</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Feb 3, 2023</td>
      <td>Paid</td>
      <td>SSteve Hamptonsteve.hamp@email.com</td>
      <td>Download</td>
    </tr>
    <tr>
      <td>INV-1232</td>
      <td>Feb 3, 2023</td>
      <td>Refunded</td>
      <td>CCiaran Murrayciaran.murray@email.com</td>
      <td>Download</td>
    </tr>
    <tr>
      <td>INV-1231</td>
      <td>Feb 3, 2023</td>
      <td>Refunded</td>
      <td>MMaria Macdonaldmaria.mc@email.com</td>
      <td>Download</td>
    </tr>
    <tr>
      <td>INV-1230</td>
      <td>Feb 3, 2023</td>
      <td>Cancelled</td>
      <td>Charles Fultonfulton@email.com</td>
      <td>Download</td>
    </tr>
    <tr>
      <td>INV-1229</td>
      <td>Feb 3, 2023</td>
      <td>Cancelled</td>
      <td>Jay Hooperhooper@email.com</td>
      <td>Download</td>
    </tr>
    <tr>
      <td>INV-1228</td>
      <td>Feb 3, 2023</td>
      <td>Refunded</td>
      <td>KKrystal Stevensk.stevens@email.com</td>
      <td>Download</td>
    </tr>
    <tr>
      <td>INV-1227</td>
      <td>Feb 3, 2023</td>
      <td>Paid</td>
      <td>SSachin Flynns.flyn@email.com</td>
      <td>Download</td>
    </tr>
    <tr>
      <td>INV-1226</td>
      <td>Feb 3, 2023</td>
      <td>Cancelled</td>
      <td>BBradley Rosalesbrad123@email.com</td>
      <td>Download</td>
    </tr>
    <tr>
      <td>INV-1225</td>
      <td>Feb 3, 2023</td>
      <td>Paid</td>
      <td>OOlivia Ryheolivia@email.com</td>
      <td>Download</td>
    </tr>
    <tr>
      <td>INV-1224</td>
      <td>Feb 3, 2023</td>
      <td>Cancelled</td>
      <td>SSteve Hamptonsteve.hamp@email.com</td>
      <td>Download</td>
    </tr>
    <tr>
      <td>INV-1223</td>
      <td>Feb 3, 2023</td>
      <td>Paid</td>
      <td>CCiaran Murrayciaran.murray@email.com</td>
      <td>Download</td>
    </tr>
    <tr>
      <td>INV-1221</td>
      <td>Feb 3, 2023</td>
      <td>Refunded</td>
      <td>MMaria Macdonaldmaria.mc@email.com</td>
      <td>Download</td>
    </tr>
    <tr>
      <td>INV-1220</td>
      <td>Feb 3, 2023</td>
      <td>Paid</td>
      <td>Charles Fultonfulton@email.com</td>
      <td>Download</td>
    </tr>
    <tr>
      <td>INV-1219</td>
      <td>Feb 3, 2023</td>
      <td>Cancelled</td>
      <td>Jay Hooperhooper@email.com</td>
      <td>Download</td>
    </tr>
    <tr>
      <td>INV-1218</td>
      <td>Feb 3, 2023</td>
      <td>Cancelled</td>
      <td>KKrystal Stevensk.stevens@email.com</td>
      <td>Download</td>
    </tr>
    <tr>
      <td>INV-1217</td>
      <td>Feb 3, 2023</td>
      <td>Paid</td>
      <td>SSachin Flynns.flyn@email.com</td>
      <td>Download</td>
    </tr>
    <tr>
      <td>INV-1216</td>
      <td>Feb 3, 2023</td>
      <td>Cancelled</td>
      <td>BBradley Rosalesbrad123@email.com</td>
      <td>Download</td>
    </tr>
  </tbody>
</table>
```

--------------------------------

### Add Responsive Viewport Meta Tag

Source: https://mui.com/joy-ui/getting-started/usage

Includes the essential responsive viewport meta tag for proper rendering and touch zooming across devices. This is recommended for mobile-first component libraries like Joy UI.

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

--------------------------------

### Individual Email View with Attachments

Source: https://mui.com/joy-ui/getting-started/templates/email

This snippet shows the detailed view of a single email, including sender, recipient, date, subject, body content, and attachments. It includes placeholders for images and a link for a zip file.

```html
<div class="email-detail">
    <div class="email-header">
        <img src="https://i.pravatar.cc/40?img=3" alt="User Avatar" class="avatar">
        <div class="sender-info">
            <span class="sender-name">Alex Jonnold</span>
            <span class="date">21 Oct 2022</span>
        </div>
        <div class="actions">
            <button>Reply</button>
            <button>Forward</button>
            <button>Delete</button>
        </div>
    </div>
    <div class="email-meta">
        <p><strong>From:</strong> alex.jonnold@hike.com</p>
        <p><strong>To:</strong> steve@mail.com</p>
    </div>
    <div class="email-body">
        <p>Hello, my friend!</p>
        <p>So, it seems we are getting there! Our trip is finally here. As you know, I love Yosemite National Park, a lot of great climbers and explorers have made history there, so I'm very excited to bring you with me in this journey.</p>
        <p>There are plenty of amazing things to see there, from internationally recognized granite cliffs, waterfalls, clear streams, giant sequoia groves, lakes, mountains, meadows, glaciers, and a lot o biological diversity. It is amazing that almost 95 percent of the park is designated wilderness. Yosemite is one of the largest and least fragmented habitat blocks in the Serra Nevada, and the park supports a fantastic diversity of plants and animals.</p>
        <p>I really hope you love coming along with me, we will have an awesome time! I'm attaching a few pics I took on the last time I went there-get excited!</p>
        <p>See you soon, Alex Jonnold</p>
    </div>
    <div class="attachments">
        <h4>Attachments</h4>
        <div class="attachment-item">
            <img src="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&h=80" alt="Yosemite National Park">
            <span>Yosemite National Park</span>
        </div>
        <div class="attachment-item">
            <img src="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?auto=format&h=80" alt="Yosemite National Park">
            <span>Yosemite National Park</span>
        </div>
        <div class="attachment-item">
            <span>videos-hike.zip</span>
            <span>100 MB</span>
        </div>
    </div>
</div>
```

--------------------------------

### Joy UI Framesx Web Blocks Template

Source: https://mui.com/joy-ui/getting-started/templates

The Framesx Web Blocks template for Joy UI, built by MUI and designed by Frames X. This template offers a collection of reusable UI blocks.

```React.js
SourceCodeSandbox
```

--------------------------------

### Order Filtering and Pagination Controls

Source: https://mui.com/joy-ui/getting-started/templates/order-dashboard

This snippet shows the UI elements for filtering orders by status and category, and for navigating through pages of results. It includes dropdowns for status and category selection, and pagination controls for moving between pages.

```html
<select name="status">
  <option value="all">All</option>
  <option value="paid">Paid</option>
  <option value="pending">Pending</option>
  <option value="refunded">Refunded</option>
  <option value="cancelled">Cancelled</option>
</select>

<select name="category">
  <option value="all">All</option>
  <option value="refund">Refund</option>
  <option value="purchase">Purchase</option>
  <option value="debit">Debit</option>
</select>

<button>Previous</button>
<span>123...8910</span>
<button>Next</button>
```

--------------------------------

### Customize List Component with CSS Variables (Joy UI)

Source: https://mui.com/joy-ui/getting-started/index

Demonstrates how to customize the Joy UI List component using built-in CSS variables to match the design of the Gatsby documentation side navigation. This showcases Joy UI's approach to component customization.

```typescript
--Input-radius
--Input-decoratorChildHeight
```

--------------------------------

### Joy UI Files Template

Source: https://mui.com/joy-ui/getting-started/templates

The Files template for Joy UI, built by MUI. This template is designed for file management interfaces or document display.

```React.js
SourceCodeSandbox
```

--------------------------------

### Email Item Display with User Avatar

Source: https://mui.com/joy-ui/getting-started/templates/email

This snippet demonstrates how to display individual emails in a list, including the sender's avatar, name, date, and subject line. It uses placeholder images for avatars and basic text formatting.

```html
<div class="email-item">
    <img src="https://i.pravatar.cc/40?img=3" alt="User Avatar" class="avatar">
    <div class="email-info">
        <span class="sender-name">Alex Jonnold</span>
        <span class="date">21 Oct 2022</span>
        <h3 class="subject">Details for our Yosemite Park hike</h3>
        <p class="preview">Hello, my friend! So, it seems that we are getting there…</p>
    </div>
</div>
```

--------------------------------

### Joy UI Sign In Side Template

Source: https://mui.com/joy-ui/getting-started/templates

The Sign In Side template for Joy UI, built by MUI. This template provides a common layout for user authentication forms with a side panel.

```React.js
SourceCodeSandbox
```

--------------------------------

### Joy UI Rental Dashboard Template

Source: https://mui.com/joy-ui/getting-started/templates

The Rental Dashboard template for Joy UI, built by Steve Ernstberger and designed by Untitled UI. This template is suitable for property rental or management platforms.

```React.js
SourceCodeSandbox
```

--------------------------------

### Joy UI Profile Dashboard Template

Source: https://mui.com/joy-ui/getting-started/templates

The Profile Dashboard template for Joy UI, built by MUI and designed by Untitled UI. This template is suitable for user profile management and dashboard interfaces.

```React.js
SourceCodeSandbox
```

--------------------------------

### Joy UI Team Template

Source: https://mui.com/joy-ui/getting-started/templates

The Team template for Joy UI, built by MUI. This template can be used to display team member information or profiles.

```React.js
SourceCodeSandbox
```

--------------------------------

### Joy UI Messages Template

Source: https://mui.com/joy-ui/getting-started/templates

The Messages template for Joy UI, built by Steve Ernstberger and designed by Untitled UI. This template is ideal for chat or messaging application interfaces.

```React.js
SourceCodeSandbox
```
Tokens:
Raw