Skip to main content

React MUI Theme Builder

React MUI Theme Builder lets you quickly create and customize Material UI themes with live previews. Easily edit colors, typography, spacing, and more.

Note: The MUI Theme Builder is meant to be used on larger screens. Please visit the site from a laptop or computer to use the builder.

All Components
Accordion
Alert
App Bar
Autocomplete
Avatar
Backdrop
Badge
Bottom Navigation
Breadcrumbs
Button
Button Group
Card
Checkbox
Chip
Dialog
Divider
Drawer
Floating Action Button
Icons
Link
List
Material Icons
Menu
Pagination
Paper
Progress
Radio Group
Rating
Select
Skeleton
Slider
Snackbar
Speed Dial
Stepper
Switch
Table
Tabs
Text Field
Toggle Button
Tooltip
Transfer List
Typography
Components
Live Example

Accordion

This is a default accordion. It uses the basic configuration.

This is the first item of multiple accordions.

This is the second item of multiple accordions.

This accordion is expanded by default using `defaultExpanded` prop.

This accordion has `primary.main` as the background color.

Alert

App Bar

Autocomplete

Avatar

Backdrop

Badge

Bottom Navigation

Breadcrumbs

Button

Button Group

Card

Checkbox

Chip

Dialog

Divider

Drawer

Floating Action Button

Icons

Link

List

Material Icons

Menu

Pagination

Paper

Progress

Radio Group

Rating

Select

Skeleton

Slider

Snackbar

Speed Dial

Stepper

Switch

Table

Tabs

Text Field

Toggle Button

Tooltip

Transfer List

Typography

Theme Builder

Edit the MUI theme visually or through code in the below editor.

Visual

Code

Dark mode
Palette
Typography
Others
Primary
Secondary
Error
Warning
Info
Success