React MUI Color Palette
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
Accordion
Default Accordion
This is a default accordion. It uses the basic configuration.
Disabled Accordion
Accordion with Multiple Items #1
This is the first item of multiple accordions.
Accordion with Multiple Items #2
This is the second item of multiple accordions.
Expanded by Default
This accordion is expanded by default using defaultExpanded prop.
Primary Styled Accordion
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
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
A
S
M
L
XL
C
R
Backdrop
- Toggle Simple Backdrop
- Toggle Backdrop with Spinner
Badge
41099830
Bottom Navigation
- Recents
- Favorites
- Nearby
Breadcrumbs
- Small Breadcrumbs
- Large Breadcrumbs
Button
- Text
- Primary
- Secondary
- Error
- Contained
- Primary
- Secondary
- Success
- Outlined
- Primary
- Secondary
- Warning
- Small
- Medium
- Large
- Disabled
- 🚀
- Start Icon
- End Icon
- ✔️
Button Group
One
Two
Three
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.
Checkbox
Variants
- Default
- Checked
- Disabled
- Disabled Checked
Sizes
- Small
- Medium
- Custom Size
Color Variants
- Primary
- Secondary
- Error
- Success
- Default
Controlled
- Always Checked
- Always Unchecked
Chip
- Default
- Outlined
- Small
- Medium
- With Icon
- Outlined Icon
- With Avatar
- Outlined Avatar
- Clickable
- Outlined Clickable
- Deletable
- Outlined Deletable
- Custom Delete Icon
- Outlined Custom Delete Icon
- Disabled
- Outlined Disabled
Dialog
- Open Small Dialog
- Open Medium Dialog
- Open Large Dialog
- Full Width
Divider
Text Divider
Centered Text
Drawer
- Open left Drawer
- Open right Drawer
- Open top Drawer
- Open bottom Drawer
Floating Action Button
- Navigate
- Edit
- Favorite
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
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)
Menu
- Open Menu 1
- Open Menu 2 (Dense)
- Open Menu 3 (Custom Anchor)
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
Radio Group
- Default Radio Group
- Option 1
- Option 2
- Option 3
Row Radio Group
- Option A
- Option B
- Option C
Rating
Basic Rating
1 Star 2 Stars 3 Stars 4 Stars 5 Stars
Controlled Rating
1 Star 2 Stars 3 Stars 4 Stars 5 Stars
Read Only Rating
Disabled Rating
1 Star 2 Stars 3 Stars 4 Stars 5 Stars
Half Rating
0.5 Stars 1 Star 1.5 Stars 2 Stars 2.5 Stars 3 Stars 3.5 Stars 4 Stars 4.5 Stars 5 Stars
Small Size
1 Star 2 Stars 3 Stars 4 Stars 5 Stars
Medium Size
1 Star 2 Stars 3 Stars 4 Stars 5 Stars
Large Size
1 Star 2 Stars 3 Stars 4 Stars 5 Stars
Select
- Basic Select
- Basic Select
- Please select an option
- Small Outlined
- Small Outlined
- Filled Select
Skeleton
Slider
- Default Slider
- Disabled Slider
- Small Slider
- Range Slider
- Vertical Slider
- Controlled Slider
- Value: 30
Snackbar
- Default Snackbar
- Success Snackbar
- Error Snackbar
- Warning Snackbar
- Info Snackbar
Speed Dial
Stepper
Horizontal Stepper 1 Step 1 2 Step 2 3 Step 3
Vertical Stepper 1 Step 1 Description for step 1 Next Back 2 Step 2 3 Step 3
Non-linear Stepper 1 Step 1 2 Step 2 3 Step 3
Switch
- Default
- Off State
- Disabled
- Checked & Disabled
- Small Size
- Medium Size
- Large Size
Table
| ID | Name | Age | Country |
|---|---|---|---|
| 1 | John Doe | 29 | USA |
| 2 | Jane Smith | 34 | Canada |
| 3 | Samuel Green | 23 | Australia |
| Total Rows: 3 |
Tabs
- Tab 1
- Tab 2
- Tab 3
Content for Tab 1
- Small Tab 1
- Small Tab 2
- Small Tab 3
Small Tab 1 Content
Scrollable Tab 1 Scrollable Tab 2 Scrollable Tab 3 Scrollable Tab 4 Scrollable Tab 5 Scrollable Tab 6
Text Field
- Standard
- Standard Disabled
- Standard Multiline
- Filled
- Filled Required *
- Filled Multiline
- Outlined
- Outlined
- Outlined Error
- Outlined Error
- Incorrect entry.
- Outlined Multiline
- Outlined Multiline
- Small Size
- Small Size
- Medium Size
- Medium Size
- With Start Icon
- 🔍 With Start Icon
- With End Icon
- ✔️ With End Icon
- Password
- Password
Toggle Button
- Left
- Center
- Right
Tooltip
- Default Tooltip
- Large Arrow
- Delayed Tooltip
- Disabled Hover
- Long Text Tooltip
- Disabled Button
- Interactive
- No Arrow
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 Text
- Caption Text
- Overline Text
Color Theme
Select primary and secondary colors for your theme.
Primary Color
Selected Color
#0288d1
Secondary Color
Selected Color
#673ab7