Skip to main content

React MUI Color Palette

React MUI Color Palette helps you visualize MUI components in different color themes. See how color changes impact your components in real time.

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.

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

Color Theme

Select primary and secondary colors for your theme.

Primary Color

#0288d1

Secondary Color

#673ab7