# Quick start
## CDN
For fast prototyping, we recommend using [esm.run](https://esm.run/),
a CDN that allows you to use `@material/web` without installing and building
from NPM.
```html
Hello Material!
```
For production, follow the [install](#install) and [build](#building) steps
below.
## Install
Install Material web components using
[npm and node](https://nodejs.org).
```shell
npm install @material/web
```
## Import
Import element definitions from
`@material/web//.js`.
```js
// index.js
import '@material/web/button/filled-button.js';
import '@material/web/button/outlined-button.js';
import '@material/web/checkbox/checkbox.js';
```
## Usage
Use the `` tag in HTML markup. Refer to the
[component docs](components/) for more guidance on using each component.
[Playground](https://lit.dev/playground/#gist=37d28012c5ec6de30809bdf4a6e26cb6)
```html
BackNext
```
## Building
Material web components uses bare module specifiers that must be resolved with
tools until [import maps](https://github.com/WICG/import-maps) are
adopted.
We recommend following
[lit.dev's modern build for production](https://lit.dev/docs/tools/production/#modern-only-build)
for a more in-depth build guide.
### Rollup quick start
For a quick start, we recommend using [Rollup](https://rollupjs.org/)
to resolve bare module specifiers into a bundled file.
Install Rollup and a plugin to resolve bare module specifiers.
```shell
npm install rollup @rollup/plugin-node-resolve
```
Create a bundle from an entrypoint `index.js` file and use it in a `
```