Component index¶
Cross-reference of components across Ant Design, MUI, and shadcn-ui. Use this when picking a reference implementation for a new component, comparing API patterns, or filling gaps.
Coverage: Ant Design 80, MUI 132, shadcn-ui 56, 201 canonical components.
| Component | Ant Design | MUI | shadcn-ui |
|---|---|---|---|
| _registry | — | — | _registry |
| accordion | collapse |
Collapse |
accordion |
| accordion-actions | — | AccordionActions |
— |
| accordion-details | — | AccordionDetails |
— |
| accordion-summary | — | AccordionSummary |
— |
| affix | affix |
— | — |
| alert | alert |
Alert |
alert |
| alert-dialog | — | — | alert-dialog |
| alert-title | — | AlertTitle |
— |
| anchor | anchor |
— | — |
| app | app |
— | — |
| app-bar | — | AppBar |
— |
| aspect-ratio | — | — | aspect-ratio |
| auto-complete | auto-complete |
Autocomplete |
— |
| avatar | avatar |
Avatar |
avatar |
| avatar-group | — | AvatarGroup |
— |
| back-top | back-top |
Fab |
— |
| backdrop | — | Backdrop |
— |
| badge | badge |
Badge |
badge |
| border-beam | border-beam |
— | — |
| bottom-navigation | — | BottomNavigation |
— |
| bottom-navigation-action | — | BottomNavigationAction |
— |
| box | — | Box |
— |
| breadcrumb | breadcrumb |
Breadcrumbs |
breadcrumb |
| button | button |
Button |
button |
| button-base | — | ButtonBase |
— |
| button-group | — | ButtonGroup |
button-group |
| card | card |
Card |
card |
| card-action-area | — | CardActionArea |
— |
| card-actions | — | CardActions |
— |
| card-content | — | CardContent |
— |
| card-header | — | CardHeader |
— |
| card-media | — | CardMedia |
— |
| carousel | carousel |
— | carousel |
| cascader | cascader |
— | — |
| chart | — | — | chart |
| checkbox | checkbox |
Checkbox |
checkbox |
| class-name | — | className |
— |
| click-away-listener | — | ClickAwayListener |
— |
| col | col |
— | — |
| collapsible | — | — | collapsible |
| color-picker | color-picker |
— | — |
| colors | — | colors |
— |
| combobox | — | — | combobox |
| command | — | — | command |
| config-provider | config-provider |
— | — |
| context-menu | — | — | context-menu |
| css-baseline | — | CssBaseline |
— |
| dark-scrollbar | — | darkScrollbar |
— |
| date-picker | date-picker |
— | calendar |
| descriptions | descriptions |
— | — |
| dialog-actions | — | DialogActions |
— |
| dialog-content | — | DialogContent |
— |
| dialog-content-text | — | DialogContentText |
— |
| dialog-title | — | DialogTitle |
— |
| direction | — | — | direction |
| divider | divider |
Divider |
— |
| drawer | drawer |
Drawer |
drawer |
| dropdown | dropdown |
— | — |
| empty | empty |
— | empty |
| fade | — | Fade |
— |
| field | — | — | field |
| filled-input | — | FilledInput |
— |
| flex | flex |
— | — |
| float-button | float-button |
— | — |
| form | form |
— | form |
| form-control | — | FormControl |
— |
| form-control-label | — | FormControlLabel |
— |
| form-group | — | FormGroup |
— |
| form-helper-text | — | FormHelperText |
— |
| form-label | — | FormLabel |
— |
| generate-utility-classes | — | generateUtilityClasses |
— |
| grid | grid |
Grid |
— |
| grow | — | Grow |
— |
| hover-card | — | — | hover-card |
| icon | icon |
Icon |
— |
| icon-button | — | IconButton |
— |
| image | image |
— | — |
| image-list | — | ImageList |
— |
| image-list-item | — | ImageListItem |
— |
| image-list-item-bar | — | ImageListItemBar |
— |
| input | input |
TextField |
input |
| input-adornment | — | InputAdornment |
— |
| input-base | — | InputBase |
— |
| input-group | — | — | input-group |
| input-label | — | InputLabel |
— |
| input-number | input-number |
— | — |
| input-otp | — | — | input-otp |
| item | — | — | item |
| kbd | — | — | kbd |
| label | — | — | label |
| layout | layout |
Container |
— |
| link | — | Link |
— |
| list | list |
List |
— |
| list-item | — | ListItem |
— |
| list-item-avatar | — | ListItemAvatar |
— |
| list-item-button | — | ListItemButton |
— |
| list-item-icon | — | ListItemIcon |
— |
| list-item-secondary-action | — | ListItemSecondaryAction |
— |
| list-item-text | — | ListItemText |
— |
| list-subheader | — | ListSubheader |
— |
| listy | listy |
— | — |
| locale | locale |
locale |
— |
| masonry | masonry |
— | — |
| mentions | mentions |
— | — |
| menu | menu |
Menu |
navigation-menu |
| menu-item | — | MenuItem |
— |
| menu-list | — | MenuList |
— |
| menubar | — | — | menubar |
| message | message |
— | — |
| mobile-stepper | — | MobileStepper |
— |
| modal | modal |
Dialog |
dialog |
| native-select | — | NativeSelect |
native-select |
| no-ssr | — | NoSsr |
— |
| notification | notification |
— | — |
| outlined-input | — | OutlinedInput |
— |
| overridable-component | — | OverridableComponent |
— |
| overview | overview |
— | — |
| pagination | pagination |
Pagination |
pagination |
| pagination-item | — | PaginationItem |
— |
| paper | — | Paper |
— |
| popconfirm | popconfirm |
— | — |
| popover | popover |
Popover |
popover |
| popper | — | Popper |
— |
| progress | progress |
LinearProgress |
progress |
| qr-code | qr-code |
— | — |
| qrcode | qrcode |
— | — |
| radio | radio |
RadioGroup |
radio-group |
| rate | rate |
Rating |
— |
| resizable | — | — | resizable |
| result | result |
— | — |
| row | row |
— | — |
| scroll-area | — | — | scroll-area |
| segmented | segmented |
ToggleButtonGroup |
— |
| select | select |
Select |
select |
| separator | — | — | separator |
| sheet | — | — | sheet |
| sidebar | — | — | sidebar |
| skeleton | skeleton |
Skeleton |
skeleton |
| slide | — | Slide |
— |
| slider | slider |
Slider |
slider |
| snackbar | — | Snackbar |
— |
| snackbar-content | — | SnackbarContent |
— |
| sonner | — | — | sonner |
| space | space |
Stack |
— |
| speed-dial | — | SpeedDial |
— |
| speed-dial-action | — | SpeedDialAction |
— |
| speed-dial-icon | — | SpeedDialIcon |
— |
| spin | spin |
— | — |
| spinner | — | — | spinner |
| splitter | splitter |
— | — |
| statistic | statistic |
— | — |
| step | — | Step |
— |
| step-button | — | StepButton |
— |
| step-connector | — | StepConnector |
— |
| step-content | — | StepContent |
— |
| step-icon | — | StepIcon |
— |
| step-label | — | StepLabel |
— |
| steps | steps |
Stepper |
— |
| style | style |
— | — |
| svg-icon | — | SvgIcon |
— |
| swipeable-drawer | — | SwipeableDrawer |
— |
| switch | switch |
Switch |
switch |
| tab | — | Tab |
— |
| tab-scroll-button | — | TabScrollButton |
— |
| table | table |
Table |
table |
| table-body | — | TableBody |
— |
| table-cell | — | TableCell |
— |
| table-container | — | TableContainer |
— |
| table-footer | — | TableFooter |
— |
| table-head | — | TableHead |
— |
| table-pagination | — | TablePagination |
— |
| table-pagination-actions | — | TablePaginationActions |
— |
| table-row | — | TableRow |
— |
| table-sort-label | — | TableSortLabel |
— |
| tabs | tabs |
Tabs |
tabs |
| tag | tag |
Chip |
— |
| textarea | — | — | textarea |
| textarea-autosize | — | TextareaAutosize |
— |
| theme | theme |
— | — |
| time-picker | time-picker |
— | — |
| timeline | timeline |
— | — |
| toggle | — | — | toggle |
| toggle-button | — | ToggleButton |
— |
| toggle-group | — | — | toggle-group |
| toolbar | — | Toolbar |
— |
| tooltip | tooltip |
Tooltip |
tooltip |
| tour | tour |
— | — |
| transfer | transfer |
— | — |
| tree | tree |
— | — |
| tree-select | tree-select |
— | — |
| types | — | types |
— |
| typography | typography |
Typography |
— |
| unstable_-trap-focus | — | Unstable_TrapFocus |
— |
| upload | upload |
— | — |
| use-lazy-ripple | — | useLazyRipple |
— |
| utils | — | utils |
— |
| version | version |
version |
— |
| watermark | watermark |
— | — |
| zero-styled | — | zero-styled |
— |
| zoom | — | Zoom |
— |
How to use¶
- Pick a canonical component name from the leftmost column.
- Follow the link to the library's reference page entry; it points at the upstream source (the local
refs/mirror keeps the same path). - For API patterns: prefer Ant Design's exhaustive prop coverage as a checklist.
- For accessibility: prefer shadcn-ui (Radix-based, a11y is upstream).
- For visual polish: prefer MUI (Material 3 alignment, motion built-in).
When designing a new component not in this list, scan all three libraries' similar components first — the patterns are usually composable.