# mdbootstrap/mdb-ui-kit

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/mdbootstrap-mdb-ui-kit).**

24,256 stars · 3,442 forks · SCSS · NOASSERTION

## Links

- GitHub: https://github.com/mdbootstrap/mdb-ui-kit
- Homepage: https://mdbootstrap.com/docs/standard/
- awesome-repositories: https://awesome-repositories.com/repository/mdbootstrap-mdb-ui-kit.md

## Topics

`bootstrap` `bootstrap-material` `bootstrap-template` `bootstrap-theme` `bootstrap-themes` `bootstrap-ui-kit` `bootstrap5` `css` `framework` `html` `javascript` `material` `material-design` `uikit`

## Description

The mdb-ui-kit is a frontend component library and visual extension that combines the Bootstrap 5 framework with Material Design principles. It provides a collection of pre-styled interface elements and responsive web templates to facilitate the development of consistent web applications.

The toolkit extends the Bootstrap ecosystem by adding Material Design aesthetics and advanced styling options. It enables rapid prototyping through the use of pre-configured design blocks and provides mechanisms for deep visual customization via SCSS variables and native CSS custom properties, including support for light and dark modes.

The library covers a wide range of interface capabilities, including interactive navigation structures like side drawers and multi-level dropdowns, complex data display widgets, and structured web forms with validation states. It also includes specialized components for user identity, media galleries, and messaging interfaces, alongside a comprehensive set of typography and layout utilities.

## Tags

### User Interface & Experience

- [Material Design Libraries](https://awesome-repositories.com/f/user-interface-experience/material-design-libraries.md) — Provides a comprehensive library of UI components that strictly implement the Material Design language.
- [Framework Extensions](https://awesome-repositories.com/f/user-interface-experience/css-frameworks/framework-extensions.md) — A visual layer that adds Material Design aesthetics and advanced styling options to the Bootstrap ecosystem.
- [Light and Dark Theme Systems](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming/light-and-dark-theme-systems.md) — Supports real-time switching between light and dark visual modes using native CSS custom properties. ([source](https://mdbootstrap.com/))
- [Column-Based Responsive Grids](https://awesome-repositories.com/f/user-interface-experience/full-screen-viewport-layouts/responsive-layout-switches/column-based-responsive-grids.md) — Provides a column-based responsive grid system that automatically reflows elements to fit different screen sizes.
- [Material Design UI Kits](https://awesome-repositories.com/f/user-interface-experience/material-design-ui-kits.md) — Combines the Bootstrap 5 framework with Material Design principles in a comprehensive UI kit.
- [Responsive Design](https://awesome-repositories.com/f/user-interface-experience/responsive-design.md) — Provides the tools and techniques necessary to create adaptive layouts that work across various devices.
- [Responsive Grid Systems](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-systems.md) — Implements a responsive grid system to control the number of card columns displayed across different device viewports. ([source](https://mdbootstrap.com/docs/standard/components/cards/))
- [Theme Style Customizations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/theme-style-customizations.md) — Enables overriding default design tokens for colors and spacing to match specific project branding. ([source](https://mdbootstrap.com/docs/standard/))
- [Bootstrap Extensions](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/theme-style-customizations/bootstrap-extensions.md) — Extends the Bootstrap 5 framework with custom Material Design themes and styling extensions.
- [User Avatars](https://awesome-repositories.com/f/user-interface-experience/avatar-components/user-avatar-dropdowns/user-avatars.md) — Renders responsive user profile images in various shapes to represent identities across different layouts. ([source](https://mdbootstrap.com/docs/standard/extended/avatar/))
- [Button Styles](https://awesome-repositories.com/f/user-interface-experience/button-styles.md) — Ships a wide array of button styles with various semantic colors, sizes, and visual properties. ([source](https://mdbootstrap.com/docs/standard/components/buttons/))
- [Callouts](https://awesome-repositories.com/f/user-interface-experience/callouts.md) — Includes semantic callout components in various colors to highlight important information or warnings. ([source](https://mdbootstrap.com/docs/standard/content-styles/typography/))
- [Carousel Autoplay Controls](https://awesome-repositories.com/f/user-interface-experience/carousel-autoplay-controls.md) — Includes controls for automatic cycling behavior, such as slide delays and pause-on-hover functionality. ([source](https://mdbootstrap.com/docs/standard/components/carousel/))
- [Carousel Components](https://awesome-repositories.com/f/user-interface-experience/carousel-components.md) — Provides components for creating image carousels with support for sequential navigation and touch swiping. ([source](https://mdbootstrap.com/docs/standard/components/carousel/))
- [Carousel Navigation Elements](https://awesome-repositories.com/f/user-interface-experience/carousel-navigation-elements.md) — Ships interactive navigation elements like arrows and slide indicators to manage movement through carousels. ([source](https://mdbootstrap.com/docs/standard/components/carousel/))
- [Carousel Transition Effects](https://awesome-repositories.com/f/user-interface-experience/carousel-transition-effects.md) — Offers configurable animation styles for carousel transitions, including sliding and crossfading effects. ([source](https://mdbootstrap.com/docs/standard/components/carousel/))
- [Multi-Item Layouts](https://awesome-repositories.com/f/user-interface-experience/carousels/carousel-layout-configurations/multi-item-layouts.md) — Supports the simultaneous display of multiple active items within a single carousel view. ([source](https://mdbootstrap.com/docs/standard/components/carousel/))
- [Image Overlays](https://awesome-repositories.com/f/user-interface-experience/content-rendering-components/image-overlays.md) — Provides components for layering text and other UI elements over background images within card containers. ([source](https://mdbootstrap.com/docs/standard/components/cards/))
- [CSS Utility Classes](https://awesome-repositories.com/f/user-interface-experience/css-utility-classes.md) — Offers a comprehensive set of single-purpose CSS utility classes for rapid spacing and alignment adjustments.
- [Content Cards](https://awesome-repositories.com/f/user-interface-experience/data-display-components/content-cards.md) — Provides flexible containers to organize images, text, and navigation headers into responsive content cards. ([source](https://mdbootstrap.com/docs/standard/components/cards/))
- [Drawer Slide Configurations](https://awesome-repositories.com/f/user-interface-experience/drawers/drawer-slide-configurations.md) — Configures drawer positions and their interaction with page margins and padding. ([source](https://mdbootstrap.com/docs/standard/extended/drawer/))
- [Drawer State Controllers](https://awesome-repositories.com/f/user-interface-experience/drawers/drawer-state-controllers.md) — Manages the expansion state of navigation menus, including toggles for slim and full modes. ([source](https://mdbootstrap.com/docs/standard/extended/drawer/))
- [Nested Submenus](https://awesome-repositories.com/f/user-interface-experience/dropdowns/nested-submenus.md) — Builds nested submenu structures that expand on click or hover across multiple levels of depth. ([source](https://mdbootstrap.com/docs/standard/extended/dropdown-multilevel/))
- [Horizontal Form Layouts](https://awesome-repositories.com/f/user-interface-experience/form-components/horizontal-form-layouts.md) — Implements layout patterns that align form labels and input controls side-by-side with responsive stacking for mobile. ([source](https://mdbootstrap.com/docs/standard/forms/overview/))
- [Form Validation Indicators](https://awesome-repositories.com/f/user-interface-experience/form-validation-indicators.md) — Provides visual feedback mechanisms and error states for form inputs to communicate validation results to users. ([source](https://mdbootstrap.com/docs/standard/forms/validation/))
- [Internationalized Interface Frameworks](https://awesome-repositories.com/f/user-interface-experience/frontend-ui-toolkits/right-to-left-support/internationalized-interface-frameworks.md) — Provides a framework for adapting interfaces to global audiences via right-to-left text direction and internationalization. ([source](https://mdbootstrap.com/))
- [Interactive UI Components](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-components.md) — Integrates dynamic and animated elements like carousels, modals, and tabs to enhance user interaction.
- [Navigation Hierarchies](https://awesome-repositories.com/f/user-interface-experience/links/categorization/navigation-hierarchies.md) — Organizes menu links into structured hierarchies using accordions to expand and collapse categories. ([source](https://mdbootstrap.com/docs/standard/extended/drawer/))
- [Modal Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs.md) — Provides overlay components for notifications, lightboxes, and focused user interactions. ([source](https://cdn.jsdelivr.net/gh/mdbootstrap/mdb-ui-kit@master/README.md))
- [Responsive Modals](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs/responsive-modals.md) — Adjusts popup size, screen position, and alignment, including support for full-screen and frame-like responsive views. ([source](https://mdbootstrap.com/docs/standard/components/modal/))
- [Modal Interaction Controls](https://awesome-repositories.com/f/user-interface-experience/modal-interaction-controls.md) — Controls modal window behavior, including dismissal via backdrop clicks or keyboard input. ([source](https://mdbootstrap.com/docs/standard/components/modal/))
- [Lifecycle Events](https://awesome-repositories.com/f/user-interface-experience/modals/lifecycle-events.md) — Executes custom logic through events that fire when a modal shows, appears, hides, or disappears. ([source](https://mdbootstrap.com/docs/standard/components/modal/))
- [Modal Content Customizations](https://awesome-repositories.com/f/user-interface-experience/modals/modal-content-customizations.md) — Allows dynamic configuration of text and interactive elements within modal dialogs based on the trigger element. ([source](https://mdbootstrap.com/docs/standard/components/modal/))
- [Modal Overlays](https://awesome-repositories.com/f/user-interface-experience/overlay-dialogs/modal-overlays.md) — Displays responsive overlay windows for prompts or notifications that sit above the primary page content. ([source](https://mdbootstrap.com/docs/standard/components/modal/))
- [Page Footers](https://awesome-repositories.com/f/user-interface-experience/page-footers.md) — Provides a structured bottom navigation area for links, company information, and subscription forms. ([source](https://mdbootstrap.com/docs/standard/navigation/footer/))
- [Page Layout Templates](https://awesome-repositories.com/f/user-interface-experience/page-layout-templates.md) — Provides structural page definitions and predefined design blocks for common web use cases. ([source](https://mdbootstrap.com/))
- [Chat Interface Components](https://awesome-repositories.com/f/user-interface-experience/prebuilt-ui-components/chat-interface-components.md) — Provides a complete set of prebuilt UI elements for messaging interfaces, including chat bubbles and input fields. ([source](https://mdbootstrap.com/docs/standard/extended/chat/))
- [JavaScript Component Controllers](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/javascript-component-controllers.md) — Manages the visibility and interactive behavior of modals and tabs via programmatic JavaScript controllers.
- [Text Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/typography-and-iconography/text-styling.md) — Implements consistent font sizing and weighting for headings to establish an organized information architecture. ([source](https://mdbootstrap.com/docs/standard/content-styles/typography/))
- [Tabbed Navigation](https://awesome-repositories.com/f/user-interface-experience/tabbed-navigation.md) — Provides tabbed navigation components to organize and switch between different content views. ([source](https://cdn.jsdelivr.net/gh/mdbootstrap/mdb-ui-kit@master/README.md))
- [Programmatic Controls](https://awesome-repositories.com/f/user-interface-experience/tabbed-navigation/programmatic-controls.md) — Allows developers to switch active tabs and manage tab instances through programmatic methods and event listeners. ([source](https://mdbootstrap.com/docs/standard/navigation/tabs/))
- [Loading Indicators](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/loading-indicators.md) — Ships animated loading indicators, such as spinning circles, to provide feedback during background processing. ([source](https://mdbootstrap.com/docs/standard/components/spinners/))
- [UI Widgets](https://awesome-repositories.com/f/user-interface-experience/ui-widgets.md) — Integrates complex functional widgets such as charts, datatables, and calendars for specialized data display. ([source](https://mdbootstrap.com/))
- [User Profile Components](https://awesome-repositories.com/f/user-interface-experience/user-profile-components.md) — Combines avatars, names, descriptions, and status indicators into comprehensive visual identity components. ([source](https://mdbootstrap.com/docs/standard/extended/avatar/))

### Development Tools & Productivity

- [UI Component Sets](https://awesome-repositories.com/f/development-tools-productivity/rapid-prototyping-tools/ui-component-sets.md) — Offers a large collection of pre-styled components to accelerate the assembly of functional web interfaces. ([source](https://mdbootstrap.com/))
- [Frontend Layout Prototyping](https://awesome-repositories.com/f/development-tools-productivity/rapid-software-prototyping/frontend-layout-prototyping.md) — Accelerates the creation of web interfaces using pre-configured starter templates and predefined design blocks.

### Web Development

- [Component Libraries](https://awesome-repositories.com/f/web-development/component-libraries.md) — Ships a vast collection of reusable, modular UI building blocks for building consistent web applications.
- [Responsive Layout Systems](https://awesome-repositories.com/f/web-development/responsive-layout-systems.md) — Includes a responsive layout system using media queries to adjust structures based on browser width.
- [Bundle Optimizers](https://awesome-repositories.com/f/web-development/bundle-optimizers.md) — Implements tree-shaking and unused code removal to reduce the final package size and improve load times. ([source](https://mdbootstrap.com/))
- [Form Layouts](https://awesome-repositories.com/f/web-development/form-handling/form-layouts.md) — Provides responsive grid layouts for aligning complex form controls, labels, and validation states.

### Part of an Awesome List

- [Admin and Site Templates](https://awesome-repositories.com/f/awesome-lists/devtools/admin-and-site-templates.md) — Provides full-page layouts and starter kits for rapid scaffolding of admin dashboards and ecommerce sites.
- [Navigation Drawers](https://awesome-repositories.com/f/awesome-lists/devtools/navigation-drawers.md) — Provides responsive side menus that can slide over content, push it aside, or exist in a slim state. ([source](https://mdbootstrap.com/docs/standard/extended/drawer/))

### Content Management & Publishing

- [Comment Systems](https://awesome-repositories.com/f/content-management-publishing/content-aggregation-curation/comment-systems.md) — Implements a responsive discussion interface featuring avatars, nested reply threads, and submission forms. ([source](https://mdbootstrap.com/docs/standard/extended/comments/))

### Graphics & Multimedia

- [Informational Notes](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/dom-web-rendering-strategies/ui-component-rendering/informational-notes.md) — Displays small, focused components designed to provide additional pieces of context or information. ([source](https://cdn.jsdelivr.net/gh/mdbootstrap/mdb-ui-kit@master/README.md))