> For the complete documentation index, see [llms.txt](https://aurelia-ui-toolkits-1.gitbook.io/materialize-bridge-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aurelia-ui-toolkits-1.gitbook.io/materialize-bridge-docs/master/2.-installation/webpack.md).
# Webpack
## Getting the plugin
In your project install the plugin via npm with the following command:
```
$ npm install --save aurelia-materialize-bridge materialize-css
```
## Configure your app
1. Make sure you use [manual bootstrapping](http://aurelia.io/docs/fundamentals/app-configuration-and-startup#manual-bootstrapping). In order to do so open your `index.html` and locate the element with the attribute aurelia-app:
```markup
```
For Material Design icons include this in your `index.html` head section:
```markup
```
2. Update `main.js` in your `src` folder with following content:
```javascript
import {PLATFORM} from 'aurelia-pal';
import 'materialize-css';
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
// Install and configure the plugin
.plugin(PLATFORM.moduleName('aurelia-materialize-bridge'), b => b.useAll());
aurelia.start();
// delay setting the root until document is fully loaded
// this will allow materialize framework fully load before bridge elements start attaching themselves
new Promise(resolve => $(document).ready(() => resolve())).then(a => a.setRoot());
}
```
**Note:** The above shows how to use all available controls at once. If you choose to pick which you'd like to use, you can `use` single components like this:
```javascript
.plugin(PLATFORM.moduleName('aurelia-materialize-bridge'), bridge => {
bridge
.useButton()
.useCollapsible()
.useModal()
.useTabs();
});
```
At the end of this page is a full list of currently available options.
3. Import css:
```markup
```
4. Configure webpack:
Change your `ProvidePlugin` configuration :
```javascript
new ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery',
'window.jQuery': 'jquery',
})
```
This prevents `jQuery` from being added/initialized multiple times.
[Look here for a working example](http://aurelia-ui-toolkits.github.io/demo-materialize/). And the [source](https://github.com/aurelia-ui-toolkits/demo-materialize) for it.
## You are done!
It is now possible to drop some custom-elements into your DOM. See the other pages on this website for detailed information on how to do this.
**Now you might want to do our** [**app developers tutorial**](https://aurelia-ui-toolkits.gitbooks.io/materialize-bridge-docs/content/app_developers_tutorial/introduction.html)**, based on Aurelia Skeleton navigation.**
As described above, here is a full list of currently available options:
```javascript
aurelia.use.plugin(PLATFORM.moduleName('aurelia-materialize-bridge'), bridge => {
bridge
.useAutoComplete()
.useBadge()
.useBreadcrumbs()
.useBox()
.useButton()
.useCard()
.useCarousel()
.useCharacterCounter()
.useCheckbox()
.useChip()
.useCollapsible()
.useCollection()
.useColors()
.useDatePicker()
.useDropdown()
.useFab()
.useFile()
.useFooter()
.useInput()
.useModal()
.useNavbar()
.usePagination()
.useParallax()
.useProgress()
.usePushpin()
.useRadio()
.useRange()
.useScrollfire()
.useScrollSpy()
.useSelect()
.useSidenav()
.useSlider()
.useSwitch()
.useTabs()
.useTooltip()
.useTransitions()
.useWaves()
.useWell();
});
```