All Projects β†’ developit β†’ Preact Mdl

developit / Preact Mdl

Licence: mit
πŸ’₯ A collection of Preact Components that encapsulate Google's Material Design Lite.

Programming Languages

184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Preact Mdl

Shards Dashboard
πŸ”₯A beautiful Bootstrap 4 admin dashboard templates pack.
Stars: ✭ 1,143 (+538.55%)
Mutual labels:  material-design, material, ui-kit
πŸ‰ Material Component Framework for Vue
Stars: ✭ 33,085 (+18383.24%)
Mutual labels:  material-design, material, ui-kit
Svelte Materialify
A Material UI Design Component library for Svelte heavily inspired by vuetify.
Stars: ✭ 351 (+96.09%)
Mutual labels:  material-design, material, ui-kit
Material Design For Bootstrap
Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.
Stars: ✭ 9,463 (+5186.59%)
Mutual labels:  material-design, material, ui-kit
React Native Material Dialog
Material design dialogs for React Native πŸ’¬
Stars: ✭ 135 (-24.58%)
Mutual labels:  material-design, material
Bootstrap Table
An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
Stars: ✭ 11,068 (+6083.24%)
Mutual labels:  material-design, material
A library to simply use Backdrop in your project (make it easy). Read more ->
Stars: ✭ 137 (-23.46%)
Mutual labels:  material-design, material
ChroMATERIAL is an IntelliJ Platform coloring scheme that expresses the chromatic nature of Material Design within IntelliJ and Android Studio. It is intended to highlight the most import aspects of your code.
Stars: ✭ 143 (-20.11%)
Mutual labels:  material-design, material
A library used to create beautiful animations and transitions for iOS.
Stars: ✭ 1,726 (+864.25%)
Mutual labels:  material-design, material
A lightweight Material Design library for Angular based on Google's Material Components for the Web.
Stars: ✭ 143 (-20.11%)
Mutual labels:  material-design, material
A UI/UX framework for creating beautiful applications.
Stars: ✭ 11,870 (+6531.28%)
Mutual labels:  material-design, material
Material Intro
A simple material design app intro with cool animations and a fluent API.
Stars: ✭ 1,718 (+859.78%)
Mutual labels:  material-design, material
Balm Ui
♦️ A modular and customizable UI library based on Material Design and Vue
Stars: ✭ 133 (-25.7%)
Mutual labels:  material-design, ui-kit
A simple library for creating animated warnings/dialogs/alerts for Android.
Stars: ✭ 136 (-24.02%)
Mutual labels:  material-design, material
Google Maps Autocomplete
Autocomplete input component and directive for google-maps built with angular and material design |Β ANGULAR V9 SUPPORTED
Stars: ✭ 134 (-25.14%)
Mutual labels:  material-design, material
Jekyll Theme Mdui
🍷A Jekyll theme based on MDUI
Stars: ✭ 143 (-20.11%)
Mutual labels:  material-design, material
React Native Paper Dates
Smooth and fast cross platform Material Design date and time picker for React Native Paper
Stars: ✭ 173 (-3.35%)
Mutual labels:  material-design, material
Vuetify Todo Pwa
βœ”οΈ A simple Todo PWA built with Vue CLI 3 + Vuex + Vuetify.
Stars: ✭ 160 (-10.61%)
Mutual labels:  material-design, material
Material Apex
A Material Design Theme for Oracle APEX
Stars: ✭ 161 (-10.06%)
Mutual labels:  material-design, material
Minimal Todo
Material To-Do App
Stars: ✭ 2,051 (+1045.81%)
Mutual labels:  material-design, material


NPM travis-ci

A collection of Preact Components that encapsulate Google's Material Design Lite.

Quick Start

Edit Preact Material Design

Grab the App Skeleton from JSFiddle, Codepen, or Code Sandbox

Using TypeScript? preact-mdl-example is an instant full project setup.



npm install --save material-design-lite preact-mdl

What does it look like?

See for yourself - preact-mdl powers ESBench and Nectarine.

Here's some live-action demos:


  • Add MDL stylesheets to your html
<!DOCTYPE html>
<html style="height: 100%; width: 100%;">
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    <title>Preact-mdl Example</title>
<body style="height: 100%; width: 100%;">
  <script src="/bundle.js"></script>
  • Import mdl module and components from preact-mdl
import { h, Component } from 'preact';
import mdl from 'material-design-lite/material';
import { Button } from 'preact-mdl';

export default class MyButton extends Component {
  render() {
        <Button>I am button!</Button>


For now, browse these Open Source projects using preact-mdl:



Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].