Component Showcase

Every MUI component styled to the Material Design 3 spec.

Buttons

Button Group

Segmented Button

FAB

Cards

Elevated Card

With surface tint

Filled Card

Surface container

Outlined Card

With outline variant

Text Fields

Outlined

Filled

Error

Required

Selection Controls

SwitchCheckbox

Slider

Rating

Chips

Assist

Filter

Input

Suggestion

Autocomplete

Framework

Tabs

Breadcrumbs

Pagination

Stepper

Account

Details

Confirm

List

Navigation

Inbox

3 unread

Sent

Table

Name	Calories	Fat (g)
Frozen yogurt	159	6
Ice cream	237	9
Eclair	262	16

Dialog

Accordion

Content for item 1. Uses surface colour and outline variant divider.

Content for item 2.

Avatars

Badge

499

Tooltip

Alerts

Success — uses primaryContainer.

Info — uses secondaryContainer.

Warning — uses tertiaryContainer.

Error — uses errorContainer.

Progress

Skeleton

MD3 Components

Purpose-built components from the MD3 spec with no MUI equivalent.

SearchBar

SegmentedButton

NavigationRail

Selected: home

Color Tokens

Primary

#6750a4

On Primary

#ffffff

Primary Container

#e9ddff

Secondary

#625b71

Secondary Container

#e8def8

Tertiary

#7e5260