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 3,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 16

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 15

MDB React - Bootstrap 4

MDB React

React 17

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, called Material Minimal, is the perfect choice for you – it combines the best of Material Design, but adds subtlety, elegance and a unique taste to it.

Explore

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.

MDB light theme components preview MDB dark theme components preview

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

We want you to grow

Enjoy top quality tutorials

Our beginner-friendly, example-based courses will guide you through the essential knowledge of MDB ecosystem and beyond.

Explore

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.

Reduce Bootstrap weight by up to 90%

Super easy optimization

Never ship unused CSS and JS again. With MDB, you can easily remove any unnecessary code, making your package light and maximally optimized.

Explore

Design blocks & templates

eCommerce, Admin Dashboards and many more

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

Design blocks Templates

Built for developers, by developers

Integrations

MDB is integrated with all major technologies, like Node.js, PHP, Python, Ruby and more.

Learn more

Support and community

The MDB team and our global community are there to support you.

Learn more

Vite, webpack, parcel...

All your favorite tools are friends with MDB and they work great together.

Learn more

RTL

Thanks to its right-to-left functionality, MDB provides full support for right-reading languages.

Learn more

Internationalization (i18n)

Thanks to the MDB, translating Bootstrap projects into other languages is child's play.

Learn more

Playground

Our playground allows you to easily and quickly test MDB in the browser and share your solutions with the community.

Learn more
Let's build something great