HBM / Md Components
Licence: mit
Material Design React Components
Stars: ✭ 97
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Md Components
Yoshino
A themable React component library!Flexible Lightweight PC UI Components built on React! Anyone can generate easily all kinds of themes by it!
Stars: ✭ 216 (+122.68%)
Mutual labels: material-design, react-components
Material Axure Library
An Axure widget library based on Google Material Design.
Stars: ✭ 490 (+405.15%)
Mutual labels: material-design, google-material
Material Admin
Free Material Admin Template
Stars: ✭ 219 (+125.77%)
Mutual labels: material-design, google-material
Notistack
Highly customizable notification snackbars (toasts) that can be stacked on top of each other
Stars: ✭ 2,562 (+2541.24%)
Mutual labels: material-design, google-material
Expenses
💰Expense tracker using Google Sheets 📉 as a storage written in React
Stars: ✭ 1,105 (+1039.18%)
Mutual labels: material-design, react-components
Ej2 React Ui Components
Syncfusion React UI components library offer more than 50+ cross-browser, responsive, and lightweight react UI controls for building modern web applications.
Stars: ✭ 166 (+71.13%)
Mutual labels: material-design, react-components
Laravel Material Design
Laravel 5.6 on Material Design Lite 1.3 with user authentication, registration with email confirmation, social media authentication, password recovery, and captcha protection. This makes full use of Controllers for the routes, templates for the views, and makes use of middleware for routing. Uses laravel ORM modeling and has CRUD (Create Read Update Delete) functionality for all tasks. Quick setup, can be done in 5 minutes. It will take longer to obtain your Facebook, Twitter, and Google Plus API Keys than it will to set this up.
Stars: ✭ 263 (+171.13%)
Mutual labels: material-design, google-material
Material Bottomnavigation
Bottom Navigation widget component inspired by the Google Material Design Guidelines at https://www.google.com/design/spec/components/bottom-navigation.html
Stars: ✭ 1,375 (+1317.53%)
Mutual labels: material-design, google-material
Vscode Materialdesignicons Intellisense
Provides intellisense, search and hover preview for Material Design Icons
Stars: ✭ 21 (-78.35%)
Mutual labels: material-design, google-material
Awesome Ui Component Library
Curated list of framework component libraries for UI styles/toolkit
Stars: ✭ 702 (+623.71%)
Mutual labels: react-components, google-material
Devextreme Reactive
Business React components for Bootstrap and Material-UI
Stars: ✭ 1,800 (+1755.67%)
Mutual labels: material-design, react-components
Uxtooltime Axure
The best Axure Widget Libraries.
Stars: ✭ 81 (-16.49%)
Mutual labels: material-design, google-material
Material.avalonia
Material design in AvaloniaUI
Stars: ✭ 126 (+29.9%)
Mutual labels: material-design, google-material
Material Design Guideline
A library for Android developers who want to create layout which follows Google material design principle.
Stars: ✭ 170 (+75.26%)
Mutual labels: material-design, google-material
Mui Treasury
A collection of ready-to-use components based on Material-UI
Stars: ✭ 1,821 (+1777.32%)
Mutual labels: material-design, react-components
Material Ui
MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.
Stars: ✭ 73,739 (+75919.59%)
Mutual labels: material-design, react-components
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 (+9655.67%)
Mutual labels: material-design, google-material
Android Iconics
Android-Iconics - Use any icon font, or vector (.svg) as drawable in your application.
Stars: ✭ 4,916 (+4968.04%)
Mutual labels: material-design, google-material
Boa
React components that implement Google's Material Design.
Stars: ✭ 61 (-37.11%)
Mutual labels: material-design, react-components
Materialdesign
✒6200+ Material Design Icons from the Community
Stars: ✭ 9,669 (+9868.04%)
Mutual labels: material-design, google-material
md-components
Installation
$ npm install --save md-components
Usage
/js/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import {Shell} from 'md-components'
class App extends React.Component {
render() {
return (
<Shell title='my app'>
<div>hello world</div>
</Shell>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
/css/index.scss
@import "../node_modules/md-components/css/base";
Fonts
The 'Roboto' font must be provided separetely and is not part of the package, e.g.:
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');
Custom colors / Theming
md-components uses six colors:
- primary
- primary dark
- primary light
- accent
- acent dark
- accent light
The font color can be either "White" or "Black" and must be specified for each color respectively. Your main sass file might look like this:
@import "node_modules/md-components/css/base";
/* provide your custom colors */
$color-primary: #1B325F;
$color-primary-text: White;
$color-primary--dark: #303F9F;
$color-primary-text--dark: White;
$color-primary--light: #E8EAF6;
$color-primary-text--light: Black;
$color-accent: #FF4081;
$color-accent-text: White;
$color-accent--dark: #F50057;
$color-accent-text--dark: White;
$color-accent--light: #FF80AB;
$color-accent-text--light: Black;
@import "node_modules/md-components/components/header/Header";
@import "node_modules/md-components/components/navigation/Navigation";
The Google material color package provides convenient access to the "official" google color palette:
@import "palette";
@import "node_modules/md-components/css/base";
/* provide your custom colors */
$color-primary: palette(Indigo, 500);
$color-primary-text: White;
$color-primary--dark: palette(Indigo, 700);
$color-primary-text--dark: White;
$color-primary--light: palette(Indigo, 50);
$color-primary-text--light: Black;
$color-accent: palette(Pink, A200);
$color-accent-text: White;
$color-accent--dark: palette(Pink, A400);
$color-accent-text--dark: White;
$color-accent--light: palette(Pink, A100);
$color-accent-text--light: Black;
@import "node_modules/md-components/components/header/Header";
@import "node_modules/md-components/components/navigation/Navigation";
Development
- You have to link
md-components
into the./examples
folder. You cannot use a relative path from./examples
to the./src
sincecreate-react-app
will throw an error.$ cd examples && npm link ../ && cd ..
- To start "compilation" while watching for changes run
$ npm run dev
- Run the examples project which uses all components
$ npm run examples
IE11
If you want to support IE11, you need to supply an Array.prototype.findIndex
polyfill with babel-polyfill or core-js. E.g with core-js:
npm i core-js --save
// your entry point e.g. index.js
import 'core-js/fn/array/find-index'
import ...
More Documents
- Google Material Design
- use Sass
- follow SUIT CSS guidelines
- Webpack, module bundler.
New release
$ np
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].