A customizable floating action button menu that follows material design

Overview

react-floating-button-menu

A customizable floating action button menu

NPM JavaScript Style Guide

Inspired by react-material-floating-button

Install

npm install --save react-floating-button-menu

Demo

See the project page

Usage

You can customize opening direction, speed, and styles of each button via props. Other options will be added soon

import {
  FloatingMenu,
  MainButton,
  ChildButton,
  Directions
} from 'react-floating-button-menu';
import MdAdd from '@material-ui/icons/add';
import MdClose from '@material-ui/icons/clear';
import MdFavorite from '@material-ui/icons/favorite';


state = {
  isOpen: false,
}
...
  <FloatingMenu
    slideSpeed={500}
    direction={Directions.Up}
    spacing={8}
    isOpen={this.state.isOpen}
  >
    <MainButton
      iconResting={<MdAdd style={{ fontSize: 20 }} nativeColor="white" />}
      iconActive={<MdClose style={{ fontSize: 20 }} nativeColor="white" />}
      background="black"
      onClick={() => this.setState({ isOpen: !this.state.isOpen })}
      size={56}
    />
     <ChildButton
      icon={<MdFavorite style={{ fontSize: 20 }} />}
      background="white"
      size={40}
      onClick={() => console.log('First button clicked')}
    />
    <ChildButton
      icon={<MdFavorite style={{ fontSize: 20 }} />}
      background="white"
      size={40}
    />
    <ChildButton
      icon={<MdFavorite style={{ fontSize: 20 }} />}
      background="white"
      size={40}
    />
  </FloatingMenu>
...

License

MIT © ifndefdeadmau5

Issues
  • on Edge, icons are behind background

    on Edge, icons are behind background

    Im trying to make the button work, but on edge, the "background" is blocking the actual icons or text on the button. Ive tried the default settings as well from your docs. this is how it looks side to side with background and without: ApplicationFrameHost_2019-03-13_13-51-03

    any Advices?

    opened by AmitTurner 5
  • Add a link for each child button ?

    Add a link for each child button ?

    Yopp, I did not find the props while allow me to add a redirection link for child button ? Thx

    opened by be-next-hotdog 4
  • npm install fails

    npm install fails

    Following the README instructions:

    git clone https://github.com/ifndefdeadmau5/react-floating-button-menu.git
    cd react-floating-button-menu
    npm install
    cd docs
    npm install
    npm start
    

    The following error appears:

          this.log.error("Invalid options type for " + alias, TypeError);
                   ^
    
    TypeError: Cannot read property 'error' of undefined
        at OptionManager.mergeOptions (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:266:16)
        at /usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:371:14
        at /usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:398:22
        at Array.map (<anonymous>)
        at OptionManager.resolvePresets (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:387:20)
        at OptionManager.mergePresets (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:370:10)
        at OptionManager.mergeOptions (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:330:14)
        at /usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:371:14
        at /usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:392:24
        at Array.map (<anonymous>)```
    
    Using NPM 6.7.0
    
    opened by comlaterra 3
  • onMouseOver in FloatingMenu

    onMouseOver in FloatingMenu

    how to detect event hover in button

    opened by hungnguyen1995 2
  • npm version 2.0.7 has no code in it

    npm version 2.0.7 has no code in it

    bug 
    opened by aequasi 2
  • Add typescript support out of the box

    Add typescript support out of the box

    It would be great

    opened by comlaterra 2
  • Update `yargs`  dependency - npm audit throws vulnerability

    Update `yargs` dependency - npm audit throws vulnerability

    NPM detects a vulnerability on the following path: react-floating-button-menu > yargs > os-locale > mem (possible DOS in mem package).

    However it's still autofixing using npm audit, would be nice to update the dependencies.

    opened by appidea 2
  • Deprecated Styled-Components

    Deprecated Styled-Components

    Not compatible since you're using styled-components v1.

    enhancement 
    opened by Chaoste 2
  • Meh

    Meh

    opened by ifndefdeadmau5 2
  • Tooltip in buttons

    Tooltip in buttons

    Tooltip in "MainButton" and "ChildButton"

    enhancement 
    opened by Gustavoaz 2
  • Bump url-parse from 1.4.7 to 1.5.3

    Bump url-parse from 1.4.7 to 1.5.3

    Bumps url-parse from 1.4.7 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump path-parse from 1.0.6 to 1.0.7

    Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump dns-packet from 1.3.1 to 1.3.4

    Bump dns-packet from 1.3.1 to 1.3.4

    Bumps dns-packet from 1.3.1 to 1.3.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump hosted-git-info from 2.8.8 to 2.8.9

    Bump hosted-git-info from 2.8.8 to 2.8.9

    Bumps hosted-git-info from 2.8.8 to 2.8.9.

    Changelog

    Sourced from hosted-git-info's changelog.

    2.8.9 (2021-04-07)

    Bug Fixes

    Commits
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for hosted-git-info since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump y18n from 4.0.0 to 4.0.1

    Bump y18n from 4.0.0 to 4.0.1

    Bumps y18n from 4.0.0 to 4.0.1.

    Changelog

    Sourced from y18n's changelog.

    Change Log

    All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

    5.0.5 (2020-10-25)

    Bug Fixes

    5.0.4 (2020-10-16)

    Bug Fixes

    • exports: node 13.0 and 13.1 require the dotted object form with a string fallback (#105) (4f85d80)

    5.0.3 (2020-10-16)

    Bug Fixes

    • exports: node 13.0-13.6 require a string fallback (#103) (e39921e)

    5.0.2 (2020-10-01)

    Bug Fixes

    5.0.1 (2020-09-05)

    Bug Fixes

    5.0.0 (2020-09-05)

    ⚠ BREAKING CHANGES

    • exports maps are now used, which modifies import behavior.
    • drops Node 6 and 4. begin following Node.js LTS schedule (#89)

    Features

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by oss-bot, a new releaser for y18n since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump elliptic from 6.5.3 to 6.5.4

    Bump elliptic from 6.5.3 to 6.5.4

    Bumps elliptic from 6.5.3 to 6.5.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Disable rotation option

    Disable rotation option

    Is there a way I could disable the rotation for the main button? currently I am changing the floating menu to a different icon and I will just change the color and not animate it on close and open of the menu.

    opened by rainercedric23 0
  • JSS to CSS or SCSS

    JSS to CSS or SCSS

    I am just opening this issue to sum up what you wrote in your TODOs. I can definitely do that over the week end if you're down, then open a PR so you can review and merge 😉 Would you prefer CSS or SCSS ?

    opened by tanohzana 4
  • Module not found upon install

    Module not found upon install

    On installing this package I get the following error:

    Failed to compile.

    ./node_modules/react-floating-button-menu/es/ChildButton.js Module not found: Can't resolve 'styled-components' in '/Sites/node_modules/react-floating-button-menu/es'

    I did try re-compiling completely but end up with the same result.

    opened by houmark 1
  • Bump http-proxy from 1.18.0 to 1.18.1 in /docs

    Bump http-proxy from 1.18.0 to 1.18.1 in /docs

    Bumps http-proxy from 1.18.0 to 1.18.1.

    Changelog

    Sourced from http-proxy's changelog.

    v1.18.1 - 2020-05-17

    Merged

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
Releases(2.1.1)
  • 2.1.1(Oct 15, 2020)

    The package has been rewritten using Typescript (bootstrapped with create-react-library) Now you can take advantage of full type support of all components!

    Source code(tar.gz)
    Source code(zip)
  • 2.0.8(Dec 15, 2019)

  • 2.0.5(Oct 27, 2019)

    Bump below packages version

    react react-dom styled-components

    Dependency change

    Replaced styled-jss to styled-components

    Misc

    All components have been migrated to function components

    Source code(tar.gz)
    Source code(zip)
  • 2.0.4(May 25, 2019)

    Make use of css property 'pointer-events' to make ChildButton un-clickable if it's not visible, previously it was poorly handled by 'z-index' which occurred cross-browsing issue.

    Source code(tar.gz)
    Source code(zip)
  • 2.0.2(May 19, 2019)

  • 2.0.1(Jan 5, 2019)

  • 2.0.0(Dec 9, 2018)

    2018/12/09

    Changes

    New feature

    • Add ~fancy~ sliding transition when toggling
    • icon props now receive component instead of function for delegating styling solution for icon to user so that you can put anything inside of buttons

    Deprecated feature

    • margin property on ChildButton now deprecated. For adding consistent margin between buttons, use spacing on FloatingMenu instead

    Misc

    • Remove unused dependencies.
    Source code(tar.gz)
    Source code(zip)
  • 1.1.0(Dec 8, 2018)

    2018/12/08

    Changes

    • FloatingMenu now exposes isOpen props to give user a full control of expanding menu.
    • ChildButton now disabled when menu is not spreaded
    Source code(tar.gz)
    Source code(zip)
A customizable floating action button menu that follows material design

react-floating-button-menu A customizable floating action button menu Inspired by react-material-floating-button Install npm install --save react-floa

Alucard 33 Sep 1, 2021
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 72.2k Oct 13, 2021
A Material-UI File Upload Dropzone

A Material-UI File Upload Dropzone

pandemicode.dev 1 Sep 18, 2021
Free and Open Source Admin for Tailwind CSS and React based on Google's Material Design.

Material Tailwind Dashboard React Material Tailwind Dashboard React is a free Admin Template based on two popular front-end technologies: Tailwind CSS

Creative Tim 29 Oct 13, 2021
Introduce users to your app with this Material-style carousel.

Material AutoRotatingCarousel So you wrote a great app and deployed it and everything. But how do you introduce new users to your app? Well, the Mater

Wertarbyte 419 Oct 3, 2021
Material style image with loading animation

Material UI Image Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern su

Wertarbyte 202 Sep 26, 2021
☄️React Material Admin is a React template built with Material-UI

React Material Admin — Material-UI Dashboard Template

Flatlogic 1.2k Oct 17, 2021
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

React Toolbox 8.7k Oct 10, 2021
Stateless UI components for react that follow material design

Material Components Stateless UI components for react that follow material design. Introduction material-components is a library of React (15.0.0) use

Garth Williams 99 Sep 9, 2021
React Bootstrap with Material Design - Powerful and free UI KIT

React Bootstrap with Material Design Built with React and Bootstrap 4. Absolutely no jQuery. 400+ material UI elements, 600+ material icons, 74 CSS an

MDBootstrap 1.2k Oct 10, 2021
A frontend framework for building admin SPAs on top of REST services, using React and Material Design.

admin-on-rest A frontend Framework for building admin applications running in the browser on top of REST services, using ES6, React and Material Desig

marmelab 400 Oct 12, 2021
React Component that implements a speed dial using Material-UI.

react-speed-dial React Component that implements a speed dial using Material-UI. For Material-UI v1 use material-ui-speed-dial like inbox toolbox vers

Simon Mollweide 57 Oct 2, 2021
React Material Design Icons – built with Pixo, Styled Components, and Styled System

React Material Design Icons Built with Pixo, Styled Components, and Styled System https://jxnblk.com/rmdi npm i rmdi // import icons individually for

Brent Jackson 132 Oct 19, 2020
React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

MDB 5 React React 17 & Bootstrap 5 & Material Design 2.0 UI KIT >> Get Started in 4 steps >> MDBReact 5 Demo 500+ material UI components Super simple,

MDBootstrap 1.2k Oct 10, 2021
Lightweight CSS framework

Material Design CSS Framework MUI is a lightweight CSS framework that follows Google's Material Design guidelines. Use From the CDN: <link href="//cdn

null 4.5k Oct 12, 2021
Free React Typescript Admin Dashboard Template built with Material-UI

Tokyo Free White Typescript React Admin Dashboard Free React Typescript Admin Dashboard Template built with Material-UI This free and open source admi

Horia S 27 Oct 8, 2021
Material Design component library for Mithril and React

Polythene Material Design component library for Mithril and React. Can be used as general-purpose component library that includes dialogs, cards, noti

Arthur Clemens 585 Oct 10, 2021
Material design for react, powered by materializecss

react-materialize Material design components for react, powered by materializecss. Install npm install [email protected] npm install react-material

React Materialize 1.4k Oct 18, 2021
Essence - The Essential Material Design Framework

#[Essence] - The Essential Material Design Framework About Essence Essence is a CSS framework that implements the guidelines from Google Material Desi

Evo Forge 416 Oct 13, 2021