React MUI Color Palette

React MUI Color Palette helps you instantly visualize Material UI components in different color themes. Customize colors easily and see how changes impact your components in real time. Quickly understand the MUI theming system and create consistent, visually appealing designs across your entire application.

Note: The React MUI Color Palette is meant to be used on larger screens. Please visit the site from a laptop or computer to use it.

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

This is a success alert — check it out!

This is an outlined success alert!

This is a filled success alert!

This is an error alert — be careful!

This is an outlined error alert!

This is a filled error alert!

This is a warning alert — check it out!

This is an outlined warning alert!

This is a filled warning alert!

This is an info alert — just for your information!

This is an outlined info alert!

This is a filled info alert!

Success

This is a success alert with a title — check it out!

Warning

This is a warning alert with a title — be careful!

Error

This is an error alert with a title — something went wrong!

Info

This is an info alert with a title — just for your information!

App Bar

Static AppBar

Relative AppBar (Secondary)

Autocomplete

Default Autocomplete

Small Autocomplete

Medium Autocomplete

Without Clear Button

Free Solo (Custom Input)

Large List of Options

Multiple Selection

Disable Close On Select

Custom Object Options

Avatar

Backdrop

Badge

41099830

Bottom Navigation

Breadcrumbs

Small Breadcrumbs

Large Breadcrumbs

Button

Button Group

Card

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.

Complex Card

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

Custom Content Card

Create custom layouts within cards using typography and actions.

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

Full Width

Max Width:

Divider

Text Divider

Centered Text

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 link Secondary color link No underline link Hover underline link Always underline link Body1 variant Body2 variant External link with inherit color Custom 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 2

Material Icons

Home (Primary)

Star (Secondary)

Favorite (Error)

Settings (Info)

Search (Success)

Delete (Warning)

Visibility (Action)

Lock (Disabled)

Pagination

Paper

Elevation 1

Elevation 3

Elevation 6

Elevation 12

Outlined Paper

Elevation 24

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

Option 1Option 2Option 3

Row Radio Group

Option AOption BOption C

Small Size Radio Group

Choice 1Choice 2Choice 3

Disabled Options

Enabled OptionDisabled Option

Select

Basic Select

Please select an option

Small Outlined

Filled Select

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

Table

ID	Name	Age	Country
1	John Doe	29	USA
2	Jane Smith	34	Canada
3	Samuel Green	23	Australia
Total Rows: 3

Tabs

Content for Tab 1

Small Tab 1 Content

Scrollable Tab 1 Content

Text Field

Standard

Standard Disabled

Standard Multiline

Filled

Filled Required

Filled Multiline

Outlined

Outlined Error

Incorrect entry.

Outlined Multiline

Small Size

Medium Size

With Start Icon

🔍

With End Icon

✔️

Password

Toggle Button

Tooltip

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

Color Theme

Select primary and secondary colors for your theme.

Primary Color

Selected Color

#0288d1

Secondary Color