Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design

React 18 & Bootstrap 5 & Material Design 2.0 UI KIT
https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design

bootstrap bootstrap4 bootstrap5 css design html javascript library material material-design material-design-for-bootstrap mdbootstrap react react-components react17 reactjs scss ui-kit uikit

Last synced: about 1 month ago
JSON representation

React 18 & Bootstrap 5 & Material Design 2.0 UI KIT

Awesome Lists containing this project

README 

        
Bootstrap 5 & React 18 UI KIT - 700+ components, MIT license, simple installation.



MDB is a collection of free Bootstrap templates, themes, design tools & resources.



---



# Get started



### [>> Get Started in 1 minute](https://mdbootstrap.com/docs/b5/react/getting-started/installation/)

Simple installation via .zip, npm or cdnjs.

 

### [>> Install with MDBGO](https://mdbgo.com/) 

 Free Hosting, WordPress support, custom domains, SSL support, free database, frontend & backend templates, webpack starter included, git repostiory, FTP & jenkins support.

 

### [>> Install with MDBGO + e-commerce shop integration](https://mdbgo.com/wordpress-shop/)

One click setup! MDB GO allows you to create a WordPress page with a single click.

Regardless whether you want to create a Travel Blog or an e-commerce shop to sell your product you can easily do that. You can even combine both into single page.



## About Material Design for Bootstrap 5 & React 18



Created by   

 Downloads

License





  MDBootstrap tutorial




Trusted by 3 000 000+ developers & designers. Used by companies & institutions like



  

    

      

      

      

      

      

      

      

      

      

      

      

      

      

    

   



  

    

      

          

          		

          

      

      

        
    

            
  • 700+ UI components
    •           

             
  • Super simple, 1 minute installation
    • 

             
  • Detailed docs & practical examples
    • 

             
  • Lots of tutorials
    • 

             
  • Huge and active community
    • 

             
  • MIT license - free for personal & commercial use
    • 

            


      

    

   



___



# Bootstrap 5 tutorial



**[>> Learn more about Bootstrap 5](https://mdbootstrap.com/docs/standard/)**



**[>> Bootstrap 5 Tutorial](https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/)**



**[>> Subscribe to our YouTube channel with dozens of Bootstrap tutorials](https://www.youtube.com/c/Mdbootstrap)**



  

    

      

         

          		

          

      

      

          

          		

          

      

    

     

        

          
Start learning from Basics


          

          		

          

         

        

          
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.





  


    

  





---



# Extended documentation