Top quality
open-source UI Kits

Material Design for Bootstrap v5 & v4

  1. Hundreds of quality components & templates
  2. All consistent, well-documented, reliable
  3. Super simple, 1-minute installation
  4. Easy theming and customization
Get started

MDB - trusted by 2,000,000+ developers and designers

nasa - logo
amazon - logo
Nike - logo
ikea - logo
kpmg - logo
sony - logo
unity - logo
samsung - logo
airbus - logo
yahoo - logo
deloitte - logo
ge - logo

Note: MDB Standard is built with the default Bootstrap 5 version, and supported by plain JavaScript

Are you unsure which technology to choose? Read our comparison

MDB Standard - Bootstrap 5

MDB Standard

Plain JavaScript

MDB Angular - Bootstrap 5

MDB Angular

Angular 13

MDB React - Bootstrap 5

MDB React

React 18

MDB Vue - Bootstrap 5

MDB Vue

Vue 3

Note: MDB jQuery is built with the default Bootstrap 4 version, and supported by jQuery library

Are you unsure which technology to choose? Read our comparison

MDB jQuery - Bootstrap 4

MDB jQuery

jQuery 3

MDB Angular - Bootstrap 4

MDB Angular

Angular 12

MDB React - Bootstrap 4

MDB React

React 16

MDB Vue - Bootstrap 4

MDB Vue

Vue 2

Key components that will save your time

For free, MIT License

A collection of stunning components made with attention to the smallest details. Forms, cards, buttons, and hundreds of others – in MDB you will find all the essential elements necessary for every project.

Explore

Need something more powerful? Try MDB Pro

Advanced components for advanced needs

Does your project require advanced support? Use cutting-edge MDB components such as charts, datatables, pickers, lightbox, calendar, table editor, and many others.

Explore

A design system that will make your projects stand out

Elegant, subtle and classy

Tired of the default Material Design, but still want to use the potential of a Google standard? The MDB design system is the perfect choice for you – it combines the best of Material Design, but adds subtlety, elegance and a unique taste to it.

Easy theming

Dark mode and custom themes

With MDB, adding a dark mode to your project is child's play. Using our CSS variables or sass files you can create your desired theme in seconds.

Customize whatever you want

Powerful and simple API

Components, utilities, layout – MDB provides an easy-to-use API that allows you to customize everything according to your needs and taste.

Stylish leather jacket

In stock

$119$101
Add to cart Buy
Trendy Pants and Shoes

Luxurious watch

In stock

$55 000
Add to cart Buy

Well, that's a mayonnaise

In stock

$2

Use MDB GO - Free hosting & deployment tool

Publish with a single command.

  • Step 1.

    Create a free account

    30 seconds, a few clicks, and it's done.

    If you already have an account on mdbootstrap.com you don't need to register, you can just use that.

    Sign up

  • Step 2.

    Install the MDB CLI

    Open your terminal and install the MDB CLI globally by entering the command below.

    npm install -g mdb-cli

  • Step 3.

    Log in

    Enter the following command in the terminal, and then log in using your details from step 1.

    mdb login

  • Step 4.

    Publish your project to the internet

    In the terminal, go to the folder where your project is located. Then enter the command below, accept or fill in your project's options and it's ready! After a few seconds, your project will be available on the Internet. And yes, it is that simple.

    mdb publish

This is just the beginning of the adventure. To find out about all the possibilities, go to the getting started page.

Design blocks & templates

eCommerce, Admin Dashboards and many more

Predefined, carefully designed sections and templates that will significantly accelerate your development.

Design blocks Templates