<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

    const {
      Container,
      Pagination,
    } = MaterialUI;

    function App() {
      return (
        <Container maxWidth="sm">
          <Pagination count={11} defaultPage={6} siblingCount={5} />
        </Container>
      );
    }


    ReactDOM.createRoot(document.getElementById('app')).render(<App />);

<!-- language: lang-html -->

    <script type="text/javascript" src="//unpkg.com/react@18/umd/react.production.min.js"></script>
    <script type="text/javascript" src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

    <script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

    <div id="app"></div>

<!-- end snippet -->