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

Static AppBar
Relative AppBar (Secondary)

Autocomplete

Avatar

A
Image Avatar
S
M
L
XL
C
R
S
Online Avatar
Offline Avatar
Busy Avatar

Backdrop

Badge

41099830

Bottom Navigation

Breadcrumbs

Small Breadcrumbs
Large Breadcrumbs

Button

Button Group

Card

Placeholder Image
Basic Card

This is an example of a basic card with a media component.

Outlined Card

This card uses the outlined variant for a subtle look.

Small Card

This is an example of a smaller card configuration.

Placeholder Image
Complex Card

This card includes an image, content, and primary actions.

Custom Content Card

Create custom layouts within cards using typography and actions.

Checkbox

Variants
Sizes
Color Variants
Controlled

Chip

Default
Outlined
Small
Medium
With Icon
Outlined Icon
With Avatar
Outlined Avatar
Primary
Secondary
Error
Warning
Info
Success
Clickable
Outlined Clickable
Deletable
Outlined Deletable
Custom Delete Icon
Outlined Custom Delete Icon
Disabled
Outlined Disabled

Dialog

Max Width:

Divider

Drawer

Floating Action Button

Icons

Home (Small)

Favorite (Small, Error Color)

Delete (Medium)

Alarm (Medium, Secondary Color)

Add to Cart (Large)

Visibility (Large, Primary Color)

Check Circle (Success Color)

Cloud (Disabled Color)

Help (Custom Purple Color)

Search (Inherit Color)

Star (Small, Warning Color)

Link

Primary color linkSecondary color linkNo underline linkHover underline linkAlways underline linkBody1 variantBody2 variantExternal link with inherit colorCustom font size link

Inline link example: Error colored link

List

  • Item 1
  • Item 2
  • Item 3
  • Inbox
  • Drafts
    Send
    Delete
Nested List
  • Nested Item
  • Sub-item 1
  • Sub-item 2
List with Avatars
  • User 1
    User 1
  • User 2
    User 2

Material Icons

Home (Primary)

Star (Secondary)

Favorite (Error)

Settings (Info)

Search (Success)

Delete (Warning)

Visibility (Action)

Lock (Disabled)

Menu

Pagination

Paper

Elevation 1
Elevation 3
Elevation 6
Elevation 8
Outlined Paper
Elevation 16

Progress

Circular Indeterminate
Circular Determinate
Circular Small Size
Circular Large Size
Linear Indeterminate
Linear Determinate
Linear Buffer
Linear Query
Circular Color Primary
Circular Color Secondary
Linear Color Success
Linear Color Error

Radio Group

Default Radio Group
Row Radio Group
Small Size Radio Group
Disabled Options

Rating

Basic Rating
Controlled Rating
Read Only Rating
Disabled Rating
Half Rating
Custom Icon Rating
Small Size
Medium Size
Large Size
Rating with Labels

Your Rating: 2

Select

Please select an option

Skeleton

Slider

Default Slider

Disabled Slider

Small Slider

Range Slider

Vertical Slider

Controlled Slider

Value: 30

Snackbar

Speed Dial

Stepper

Horizontal Stepper
Step 1
Step 2
Step 3
Vertical Stepper
Step 1

Description for step 1

Step 2
Step 3
Non-linear Stepper

Switch

Table

IDNameAgeCountry
1John Doe29USA
2Jane Smith34Canada
3Samuel Green23Australia
Total Rows: 3

Tabs

Content for Tab 1

Small Tab 1 Content

Scrollable Tab 1 Content

Text Field

Incorrect entry.

🔍
✔️

Toggle Button

Tooltip

Transfer List

Choices
  • Item 1
  • Item 2
  • Item 3
  • Item 4
    • Chosen
  • Item 5
  • Item 6
  • Item 7
  • Item 8

    • Typography

    h1. Heading

    h2. Heading

    h3. Heading

    h4. Heading

    h5. Heading
    h6. Heading
    Subtitle 1
    Subtitle 2

    Body 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, pulvinar facilisis justo mollis, auctor consequat urna.

    Body 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, pulvinar facilisis justo mollis, auctor consequat urna.

    Button TextCaption TextOverline Text

    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