> For the complete documentation index, see [llms.txt](https://8bit-1.gitbook.io/solana-wallet-connect-tutorial/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://8bit-1.gitbook.io/solana-wallet-connect-tutorial/react-and-next.js/usage.md).

# Usage

Learn the basics of working with Material UI components.

### Quickstart <a href="#quickstart" id="quickstart"></a>

After [installation](https://mui.com/material-ui/getting-started/installation/), you can import any Material UI component and start playing around. For example, try changing the `variant` on the [Button](https://mui.com/material-ui/react-button/) to `outlined` to see how the style changes:

Hello worldJSTSCollapse code

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';

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

Press Enter to start editing

### Globals <a href="#globals" id="globals"></a>

Since Material 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 <a href="#responsive-meta-tag" id="responsive-meta-tag"></a>

Material 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:

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

#### CssBaseline <a href="#cssbaseline" id="cssbaseline"></a>

Material UI provides an optional [CssBaseline](https://mui.com/material-ui/react-css-baseline/) component. It fixes some inconsistencies across browsers and devices while providing resets that are better tailored to fit Material UI than alternative global style sheets like [normalize.css](https://github.com/necolas/normalize.css/).

#### Default font <a href="#default-font" id="default-font"></a>

Material UI uses the Roboto font by default. See [Installation—Roboto font](https://mui.com/material-ui/getting-started/installation/#roboto-font) for complete details.