# Using a React library

Add the [library's](https://v4.mui.com/components/buttons/) CDN to the Widget's *3rd party libraries*:

```
https://unpkg.com/@material-ui/core@4.11.4/umd/material-ui.development.js
```

Note that in the path, the `umd` tells that this CDN is exposed through UMD format.

Now, in the code editor's HTML tab, put the following:

```html
<div id="root"></div>
```

Change to the Javascript (JSX) tab and paste the following:

```javascript
const { createRoot } = ReactDOM;
const { Button } = MaterialUI;


function App() {
    return (
        <>
            <Button variant="contained" color="primary">
                First button using react and MaterialUI
            </Button>
            <Button variant="outlined" color="secondary">
                Another button
            </Button>
        </>
    );
}


```

After saving the changes, the widget will be rendered as:

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2FItZX6ob66fftC7UErYUp%2Fimage.png?alt=media&#x26;token=05016434-b8c0-4599-a283-158c52641996" alt=""><figcaption></figcaption></figure>