MUI Treasury

Theme Preview

Palette

All colors

Primary

Monochromatic branding palette

main 
light 
dark 
text 

Secondary

System gray tones for supporting UI elements

main 
light 
dark 
text 

Success

Green palette for positive actions and states

main 
light 
dark 
text 

Error

Red palette for error states and destructive actions

main 
light 
dark 
text 

Warning

Yellow/amber palette for warning states

main 
light 
dark 
text 

Info

Blue palette for informational elements

main 
light 
dark 
text 

Background & Text

background.default 
background.paper 
text.primary 
text.secondary 

Typography

h1. Heading

h2. Heading

h3. Heading

h4. Heading

subtitle1. Lorem ipsum dolor sit amet
subtitle2. Lorem ipsum dolor sit amet

body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

button textcaption textoverline text

Input Base

Enter and edit text

TextField

Enter and edit text

variant="outlined" (default)

This is helper text

size="small"
size="large"
error state

This field has an error

This field is required

disabled
multiline
fullWidth
With icons
Input types

Spacing & Radius

Spacing Scale

8px base

00px
18px
216px
324px
432px
540px
648px
756px
864px

Border Radius

Default (8px)
2x (16px)
Circle (50%)

Shadows

0
1
2
3
4
6
8
12
16
24

Material UI

All building-block components

Accordion

Show/hide sections of related content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

Alert

Brief messages without interrupting user flow

standard variant (default)
filled variant
outlined variant

Autocomplete

Text input with suggested options

multiple selection
multiple selection (small)
multiple selection (large)
freeSolo custom input

Avatar

Profile pictures and icons

A
B
C
variant="square"
A
B
C
variant="rounded"
A
B
C

AvatarGroup

Multiple avatars grouped together

+2
C
B
A

Button

Actions and choices

color="secondary"
color="success"
color="error"
color="warning"
color="info"
size="small"
size="large"
startIcon & endIcon
disabled
Icon buttons

Card

Content and actions about single subject

Simple CardSeptember 14, 2016

This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 or 2 seeded bell peppers, or add a bit of hot sauce to give it a bit more kick.

With media
Card image
Lizard

Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica.

variant="outlined"
Outlined Card

This card uses the outlined variant to display a subtle border.

elevation=0
Flat Card

This card has no elevation for a flat appearance.

Complex card
R
Shrimp and Chorizo PaellaSeptember 14, 2016
Paella dish

This impressive paella is a perfect party dish and a fun meal to cook together with your guests.

Checkbox

Select one or more items from set

color="secondary"
color="success"
size="small"
size="large"
disabled
With labels

Chip

Compact elements for inputs/attributes/actions

Default
Clickable
Deletable
Clickable & Deletable
variant="outlined"
Default
Clickable
Deletable
Clickable & Deletable
color="primary"
Primary
Primary Outlined
color="secondary"
Secondary
Secondary Outlined
color="success"
Success
Success Outlined
color="error"
Error
Error Outlined
color="warning"
Warning
Warning Outlined
color="info"
Info
Info Outlined
size="small"
Small
Small Outlined
Small Deletable
size="large"
Large
Large Outlined
Large Deletable
With icons
Avatar
Done
M
Avatar Chip
Deletable

Dialog

Task information and decisions

maxWidth="sm"

Divider

Thin line for grouping elements

Content above

Content below

variant="middle"

Content above

Content below

variant="inset"

Content above

Content below

orientation="vertical"

Left

Middle

Right

With text
In lists
  • Item 1
  • Item 2
  • Item 3

Fab

Primary screen action

variant="extended"
size="small"
size="large"
disabled

Radio

Select one option from set

color="secondary"
color="success"
size="small"
size="large"
disabled

RadioGroup

Group of radio buttons

row layout

Rating

Insight and submission of ratings

size="small"
size="large"
disabled
readOnly
Custom icon

Select

Collect user info from options list

variant="outlined"
size="small"
size="large"
disabled
multiple
Without label

Skeleton

Placeholder preview before data loads

variant="text"
variant="circular"
variant="rectangular"
variant="rounded"
animation="wave"
animation="pulse"
animation=false
Loading card example

Slider

Selections from value ranges

color="secondary"
size="small"
Range slider

Snackbar

Brief process notifications

Stack

Arrange elements vertically/horizontally

Item 1
Item 2
Item 3
Item A
Item B
Item C
divider
Item 1
Item 2
Item 3

Stepper

Progress through numbered steps

  1. Select campaign settings
  2. Create an ad group
  3. Create an ad
orientation="vertical"
  1. Select campaign settings
  2. Create an ad group

    Create ad groups to organize your ads by theme.

  3. Create an ad

Switch

Toggle single setting on/off

color="secondary"
size="small"
With labels

Icons

Material UI icons and SvgIcon

@mui/icons-material
color="primary"
color="secondary"
fontSize="small"
fontSize="large"

SvgIcon

Custom SVG icons

Table

Display sets of data

Dessert (100g serving)CaloriesFat (g)Carbs (g)
Frozen yoghurt1596.024
Ice cream sandwich2379.037
Eclair26216.024

Tabs

Explore and switch between views

Item One Content

variant="scrollable"
orientation="vertical"

Vertical Tab Content

Toggle Button

Group related options

color="primary"
size="small"

Tooltip

Informative text on hover/focus

placement variants
Custom styling