# preact-mdl
**Repository Path**: mirrors_developit/preact-mdl
## Basic Information
- **Project Name**: preact-mdl
- **Description**: :boom: A collection of Preact Components that encapsulate Google's Material Design Lite.
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-08
- **Last Updated**: 2026-07-25
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# preact-mdl
[](https://www.npmjs.com/package/preact-mdl)
[](https://travis-ci.org/developit/preact-mdl)
A collection of [Preact] Components that encapsulate Google's [Material Design Lite].
## Quick Start
[](https://codesandbox.io/s/6w66jzw3mn)
Grab the App Skeleton from [JSFiddle](https://jsfiddle.net/developit/weq28uq3/), [Codepen](https://codepen.io/alexkrolick/project/editor/ANGjjr), or [Code Sandbox](https://codesandbox.io/s/6w66jzw3mn)
**Using TypeScript?** [preact-mdl-example](https://github.com/tbekolay/preact-mdl-example) is an instant full project setup.
## [Documentation](docs.md)
## Installation
```sh
npm install --save material-design-lite preact-mdl
```
## What does it look like?
See for yourself - `preact-mdl` powers [ESBench](http://esbench.com) and [Nectarine](http://nectarine.rocks).
_Here's some live-action demos:_
---
## Usage
* Add MDL stylesheets to your html
```html
Preact-mdl Example
```
* Import mdl module and components from preact-mdl
```JavaScript
import { h, Component } from 'preact';
import mdl from 'material-design-lite/material';
import { Button } from 'preact-mdl';
export default class MyButton extends Component {
render() {
return(
)
}
}
```
## Demos
For now, browse these Open Source projects using `preact-mdl`:
- **[Documentation Viewer](https://github.com/developit/documentation-viewer/)**
- **[Nectarine.rocks](https://github.com/developit/nectarine.rocks/)**
- **[Preact Simple Starter](https://github.com/ooade/PreactSimpleStarter)**
- _[add yours!](https://github.com/developit/preact-mdl/issues)_
---
### License
[MIT]
[Material Design Lite]: http://www.getmdl.io
[Preact]: https://github.com/developit/preact
[MIT]: http://choosealicense.com/licenses/mit/