The same component,
three design systems.

A static styled label with no built-in dismiss, count, or interactive behavior; use asChild to render it as a link or button.

MUI splits these: Chip (interactive, deletable via onDelete) for tokens, and a separate Badge that overlays a small count/dot on a child via badgeContent.

Ant uses Tag for categorization labels (closable, colorable) and a separate Badge for count/dot markers that decorate another element.

Wraps Radix Avatar; composed of AvatarImage plus AvatarFallback (shown while the image loads or if it fails).

Falls back to children (initials) or a generic icon when src is missing; AvatarGroup stacks and overflows multiple avatars.

shape toggles circle/square, size accepts presets or a number, and Avatar.Group clusters multiple avatars with a maxCount overflow.

Variants are defined with class-variance-authority; use asChild to render an <a> or Next Link while keeping button styling; no built-in loading state.

Emphasis is set by variant while intent (primary, error, etc.) is set by the separate color prop; loading is handled by a related LoadingButton / loading prop.

type sets style/emphasis, danger flags destructive actions, and loading shows a built-in spinner; ghost makes the background transparent for colored surfaces.

Wraps Radix Switch; note that shadcn also has a separate Toggle component which is a pressable toggle button, not an on/off switch.

Often wrapped in FormControlLabel to attach a label; color and size follow the standard MUI theme props.

Supports inline text/icons via checkedChildren and unCheckedChildren and a built-in loading state; a 'small' size is available.

Wraps Radix Checkbox; supports an 'indeterminate' checked value and is typically paired with the Label component.

Usually wrapped in FormControlLabel and grouped in a FormGroup; the icon and checkedIcon props allow custom marks.

Checkbox.Group manages a set of options and reports the checked values array; indeterminate is set explicitly on a parent checkbox.

Wraps Radix RadioGroup; individual options are RadioGroupItem elements each paired with a Label.

RadioGroup wraps individual Radio controls (each in a FormControlLabel); the row prop lays them out horizontally.

Radio.Group can render as classic radios or as a segmented button bar via optionType='button' with buttonStyle.

Select (Radix Select) is for choosing a value; a separate DropdownMenu component handles command/action menus, and NativeSelect wraps the OS control.

Select renders MenuItem children and integrates with FormControl/InputLabel; a standalone Menu component (opened from an anchorEl) handles action menus.

Select is the value-picker (mode='multiple'/'tags' for multi-select); a separate Dropdown component wraps a Menu for action/command lists.

Not a single component but a recipe: a Popover containing the Command (cmdk) list with search input; you wire up the selected value yourself.

Requires a renderInput returning a TextField; freeSolo allows arbitrary text and multiple turns selections into deletable chips.

AutoComplete is essentially an enhanced Input with suggestions; for tagging/free-entry, Ant often steers you to Select with mode='tags' instead.

Wraps Radix Slider; supply an array with two values in defaultValue/value to create a range (two-thumb) slider.

Passing an array of values renders a range slider; marks add tick labels and valueLabelDisplay shows the current value tooltip.

Set range={true} for a two-handle range slider; marks place labeled ticks and vertical enables a vertical orientation.

Wraps Radix ToggleGroup; type='single' behaves like a segmented control while type='multiple' allows several pressed at once.

Contains ToggleButton children; exclusive={true} makes it single-select (segmented-control-like), otherwise multiple can be selected.

Segmented is single-select only (defined via options); for multi-select toggle behavior Ant uses Checkbox/Radio buttons instead.

Two separate Radix-based components: Tooltip for hover hints (with TooltipProvider) and Popover for click-triggered interactive panels; HoverCard is a third hover-preview variant.

Tooltip takes text via the title prop and is hover/focus-driven; Popover is anchored to an anchorEl element and holds arbitrary interactive content.

Tooltip uses title for simple text; Popover adds a title plus a content area that can hold action elements like links and buttons.

Wraps Radix Dialog (modal by default); a separate AlertDialog enforces an explicit confirm/cancel decision for destructive actions.

Composed with DialogTitle, DialogContent, and DialogActions; modal by default, and fullScreen makes it cover the viewport on mobile.

Named Modal, with built-in OK/Cancel footer; Modal.confirm() / Modal.info() offer imperative confirmation dialogs.

Sheet (Radix Dialog) is the edge panel with a side prop; the separate Drawer component (Vaul) is a drag-to-dismiss bottom sheet.

anchor sets the edge (left/right/top/bottom) and variant controls whether it overlays (temporary) or docks alongside content (permanent); SwipeableDrawer adds touch gestures.

placement chooses the edge (left/right/top/bottom); width or height sizes it and mask toggles the dimmed backdrop.

Wraps Radix Tabs; composed of TabsList, TabsTrigger, and TabsContent, and supports vertical orientation.

Tabs contains Tab children; you manage the active panel manually, and variant='scrollable' handles overflow with scroll buttons.

Panels are defined via the items array; type='card'/'editable-card' changes the look and tabPosition can move the tab bar to any edge.

Composed of BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, and BreadcrumbSeparator; a BreadcrumbEllipsis collapses long trails.

Wraps Link/Typography children; maxItems auto-collapses the middle of long trails behind an ellipsis.

In v5 the trail is defined via the items array (each with title/href); a custom separator string or node is supported.

A presentational set of parts (PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis); page state and logic are up to you.

count is the total pages; shape='rounded' and variant style the buttons, and TablePagination is a separate table-specific variant.

Driven by total item count and pageSize; showSizeChanger adds a page-size dropdown and showQuickJumper adds a jump-to-page box.

Stepper contains Step and StepLabel children; orientation switches horizontal/vertical and nonLinear lets users jump between steps.

Named Steps and configured via the items array; direction sets horizontal/vertical and status marks a step as wait/process/finish/error.

Wraps Radix Accordion; type='single' vs 'multiple' controls how many panels open, and Collapsible is a separate single-section disclosure primitive.

Composed of AccordionSummary and AccordionDetails; to enforce single-open behavior you control the expanded state yourself, and Collapse handles raw show/hide animation.

Named Collapse; set accordion={true} for one-panel-at-a-time behavior, with panels supplied via the items array in v5.

Composed of CardHeader, CardTitle, CardDescription, CardContent, and CardFooter subcomponents; styling is via Tailwind classes.

Assembled from CardHeader, CardMedia, CardContent, and CardActions; variant='outlined' swaps the shadow for a border and CardActionArea makes it clickable.

Configured largely through props (title, extra, cover, actions) rather than subcomponents, with a built-in loading skeleton state.

The recommended transient toast is Sonner (call toast()); inline messages use the Alert component (with AlertTitle/AlertDescription) which has default and destructive variants.

Snackbar is the transient container positioned via anchorOrigin; nest an Alert (severity: success/info/warning/error) inside it for colored, iconed status messages.

Ant separates three: lightweight message (one-line toast), richer notification (title + description in a corner), and inline Alert (type/showIcon/banner) that lives in the layout.

Progress (Radix) is a determinate linear bar driven by value; shadcn also ships a dedicated indeterminate Spinner component.

One family in two shapes: CircularProgress (the spinner) and LinearProgress (the bar), each supporting determinate (with value) or indeterminate modes.

Progress covers determinate bars and rings via type and percent; Spin is the separate indeterminate loading spinner that can wrap content.

A minimal animated placeholder div; you size and shape each skeleton yourself with Tailwind classes to match the real content.

The variant prop matches common shapes and animation can be 'pulse', 'wave', or false; it can infer size from a child element.

A composite placeholder for text/avatar/paragraph; active enables the shimmer, and dedicated Skeleton.Button / Skeleton.Image variants exist.