Components

Each page includes why to use it, a live demo, a code example, and props where relevant.

Foundations

• Button — primary actions and groups
• ButtonBase — custom pressable surfaces
• IconButton — icon-only actions
• FloatingActionButton — floating primary action
• Box — layout + sx primitive
• Stack — one-axis spacing
• Container — centered page width
• Grid — multi-column layouts
• Typography — text styles
• Paper — elevated surface
• Divider — section separators
• Collapse — expand/collapse animation
• Modal — blocking overlay primitive
• Backdrop — page dimmer

Layout and shell

• AppBar — top app chrome (+ Toolbar)
• Card — content tiles
• Accordion — expandable sections
• Drawer — side panels
• Link — themed anchors
• Breadcrumbs — hierarchy path

Inputs and forms

• TextField — labeled text input
• InputBase — bare input primitive
• Input — standard / outlined / filled inputs
• InputLabel — floating field label
• InputAdornment — start/end adornments
• FormControl — field context
• FormLabel — group / section label
• FormHelperText — helper and error text
• FormGroup — checkbox/switch groups
• FormControlLabel — labeled checkbox/radio/switch
• Select — dropdown select
• NativeSelect — styled native select
• AutoComplete — filterable options
• CheckBox — multi-select control
• Radio — single-select control
• Switch — on/off toggle
• Slider — numeric range
• Toggle — toggle button group

Data display

• List — rows and navigation lists
• Table — tabular data
• TablePagination — table footer paging
• Avatar — user image / initials
• Badge — notification counts
• Chip — tags and filters
• Tooltip — hover hints
• Skeleton — loading placeholders
• ImageList — media galleries
• Rating — star scores
• Pagination — page controls

Feedback

• Alert — persistent messages
• Snackbar — transient toasts
• Dialog — modal dialogs
• Progress — circular and linear
• Backdrop — busy overlay

Navigation

• Tabs — peer view switcher
• Stepper — multi-step wizards
• MobileStepper — compact carousel progress
• BottomNavigation — mobile primary nav
• Menu — contextual action menu
• SpeedDial — fan-out FAB actions

Overlays

• Popover — anchored modal surface
• Popper — non-blocking positioned layer
• Modal — base modal primitive
• Tooltip — ToolTip / Tooltip alias

Utilities and i18n

• ClickAwayListener — outside-click dismiss
• CssBaseline — global CSS reset
• Locale — theme.locale and translations