React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

Overview

MDB Logo

MDB 5 React

React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

>> Get Started in 4 steps

>> MDBReact 5 Demo

Downloads License YouTube Video Views


  • 500+ material UI components
  • Super simple, 1 minute installation
  • Detailed docs & multiple practical examples
  • React 17
  • Huge and active community
  • MIT license - free for personal & commercial use

Trusted by 2 000 000+ developers & designers. Used by companies like


Tutorial for the latest Bootstrap v.5 Alpha. In this video we'll learn about the changes implemented into v.5.

>> Click here for a written tutorial

Start to Code

Learn Bootstrap 5 | Crash Course for Beginners in 1.5H


Demo

Simplicity and ease of use are key features of MDB 5 React UI Kit. You need only one minute to install and run it.

Buttons

Use MDB custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Spinners

Indicate the loading state of a component or page with MDB spinners, built entirely with HTML, CSS, and no JavaScript.

Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Footer

A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.

Hover

MDB hover effect appears when the user positions the computer cursor over an element without activating it. Hover effects make a website more interactive.

Notes

Notes are small components very helpful in inserting an additional piece of information.

and more.

Issues
  • Not working with create-react-app

    Not working with create-react-app

    I get the following error:

    ./node_modules/mdbreact/src/components/TextField.js Module parse failed: Unexpected token (101:6) You may need an appropriate loader to handle this file type. | icon, | iconClass, | ...attributes | } = this.props; |

    opened by shilu911 28
  • Can't resolve 'mdbreact'

    Can't resolve 'mdbreact'

    Hello,

    When i try to import Button and Collapse, i get:

    Import: import { Button, Collapse } from 'mdbreact';

    Error: Module not found: Can't resolve 'mdbreact' in 'C:\wamp64\www\bob-web\notice-cmi\src\components\Collapsable'

    I installed it with npm. Did i miss something ?

    opened by BenoKop 25
  • Error with Navbar component due to React 16

    Error with Navbar component due to React 16

    Context I develop an SPA app with React 16.2.0. I'm using the last version of mdbreact : 4.1.0 I would like to use the Navbar component.

    Steps to reproduce

    1. Create a test project npx react-create-app test-issue

    2. Check if the react version is >= 16.0.0

    3. In App.js, replace the content with the followings

    import logo from './logo.svg';
    import './App.css';
    import { Navbar } from 'mdbreact'
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            <Navbar color="indigo" dark expand="md" fixed="top" scrolling>
              </Navbar>
          </div>
        );
      }
    }
    
    export default App;`
    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    import { Navbar } from 'mdbreact'
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            <Navbar color="indigo" dark expand="md" fixed="top" scrolling>
              </Navbar>
          </div>
        );
      }
    }
    
    export default App;
    
    1. Launch the app npm start

    2. An error is display

    Element ref was specified as a string (navbar) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).

    Problem

    After some deeply research, I found the source of the trouble. https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design/blob/65b8f6b66559ed6bbaed5eff3c485d355e724e2a/src/components/Navbar.js#L75

    String is not anymore accepted for ref. You can have a look on the official documentation of React : https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs

    According to the above informations and the changelog (cf https://github.com/facebook/react/blob/master/CHANGELOG.md), it is very much possible that the functionnalty was deleted.

    opened by Blennouill 11
  • Remove unused moment.js dependency

    Remove unused moment.js dependency

    cla-signed 
    opened by Vrq 10
  • Dependency of React 16 is not updated

    Dependency of React 16 is not updated

    its mentioned that version 4.1.0 is updated for React 16. but its package.json have dependency : "react": "^15.6.1", "react-dom": "^15.6.1",

    which cause multiple node_module installation dependency error:

    invariant.js:42 Uncaught Error: Element ref was specified as a string (ripple) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner). at invariant (invariant.js:42) at coerceRef (react-dom.development.js:6736) at reconcileSingleElement (react-dom.development.js:7532) at reconcileChildFibers (react-dom.development.js:7635) at reconcileChildrenAtExpirationTime (react-dom.development.js:7756) at reconcileChildren (react-dom.development.js:7747) at finishClassComponent (react-dom.development.js:7881) at updateClassComponent (react-dom.development.js:7850) at beginWork (react-dom.development.js:8225) at performUnitOfWork (react-dom.development.js:10224)

    opened by dasarishiv 10
  • Error establishing a database connection

    Error establishing a database connection

    This is what I'm getting when I go for documentation or demo in online.

    opened by RamyaAshika 8
  • Attempted import error: 'MDBAvatar' is not exported from 'mdbreact'.

    Attempted import error: 'MDBAvatar' is not exported from 'mdbreact'.

    First, I installed mdbreact package from npm. After adding the Component it is showing the following error. My React version is 16.12.0. Attempted import error: 'MDBAvatar' is not exported from 'mdbreact'.

    Can anyone help me to resolve this issue?

    opened by yogendrajs 8
  • Cannot find module './factoryWithThrowingShims'

    Cannot find module './factoryWithThrowingShims'

    Expected behavior

    When adding mdbreact to my existing project, expected it to run as is

    Actual behavior

    I get the error

    Error: Cannot find module './factoryWithThrowingShims' from '/Users/.../node_modules/mdbreact/dist'

    Your working environment and MDB version information

    Node : v7.3.0 NPM : 5.5.1 React : Both 15.6.1 and 16 mdbreact : both via npm install (4.2.0) and git+https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design.git

    I am using Browserify and babelify to parse JS with babel-preset-env and babel-preset-react

    Resources (screenshots, code snippets etc.)

    > browserify index.js -t [ babelify --presets [ env react ] ] -o build/web-bundle.js
    
    Error: Cannot find module './factoryWithThrowingShims' from '/Users/.../node_modules/mdbreact/dist'
        at /Users/.../node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:21
        at load (/Users/.../node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
        at onex (/Users/.../node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
        at /Users/.../node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
        at FSReqWrap.oncomplete (fs.js:111:15)
    
    opened by ghost 8
  • MDB Datatable select all with checkbox

    MDB Datatable select all with checkbox

    Hi I'm trying to do https://mdbootstrap.com/docs/react/tables/additional/ like this but with select all option. But I can't able to achieve this using mdb bootstrap. May I get any help on this or any documentation?

    opened by RamyaAshika 7
  • Bootstrap 4.4.x

    Bootstrap 4.4.x

    enhancement question 
    opened by auvipy 6
Releases(1.4.0)
Owner
MDBootstrap
Open Source UI Kits & Templates built using Bootstrap, Angular, React & Vue JS
MDBootstrap
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
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
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
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
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
☄️React Material Admin is a React template built with Material-UI

React Material Admin — Material-UI Dashboard Template

Flatlogic 1.2k Oct 17, 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
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
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
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
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 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
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
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
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
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
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
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