# MUI Component Library ## Layout Components ### Box The fundamental building block: ```typescript Section Title Content goes here ``` ### Container Centers content with max-width: ```typescript {/* Content automatically centered and constrained */} ``` ### Grid (v2) Responsive grid layout: ```typescript import Grid from '@mui/material/Grid2'; Item 1 Item 2 Item 3 ``` ### Stack One-dimensional layout with spacing: ```typescript {user.name} ``` ## Data Display ### Typography Text with theme variants: ```typescript Main Heading Body text with secondary color Bold caption ``` ### Card Content container: ```typescript Card Title Card description text ``` ### List Structured content lists: ```typescript ``` ### Table Data tables: ```typescript Name Email Actions {rows.map((row) => ( {row.name} {row.email} ))}
``` ## Input Components ### TextField Text input with validation: ```typescript setEmail(e.target.value)} error={!!emailError} helperText={emailError} fullWidth required /> ``` ### Select Dropdown selection: ```typescript Country ``` ### Checkbox & Switch Boolean inputs: ```typescript } label="I agree to the terms" /> } label="Enable notifications" /> ``` ### Radio Group Single selection: ```typescript Payment Method setPayment(e.target.value)}> } label="Credit Card" /> } label="PayPal" /> } label="Cryptocurrency" /> ``` ### Autocomplete Searchable select: ```typescript option.label} value={value} onChange={(event, newValue) => setValue(newValue)} renderInput={(params) => ( )} /> ``` ## Buttons ### Button Variants ```typescript ``` ### Button with Icons ```typescript ``` ## Feedback Components ### Alert Status messages: ```typescript Operation completed successfully! }> An error occurred. Please try again. ``` ### Snackbar Toast notifications: ```typescript Changes saved! ``` ### Dialog Modal dialogs: ```typescript Confirm Delete Are you sure you want to delete this item? This action cannot be undone. ``` ### CircularProgress & LinearProgress Loading indicators: ```typescript ``` ### Skeleton Content placeholders: ```typescript ``` ## Navigation ### AppBar & Toolbar Application header: ```typescript App Title ``` ### Drawer Side navigation: ```typescript navigate('/dashboard')}> navigate('/settings')}> ``` ### Tabs Tabbed navigation: ```typescript Overview content ``` ### Breadcrumbs Navigation trail: ```typescript Home Products Electronics ``` ## Utility Components ### Tooltip Helpful hints: ```typescript ``` ### Popover Floating content: ```typescript Popover content ``` ### Menu Context menus: ```typescript Edit Delete ``` ### Chip Compact information: ```typescript } /> ``` ### Badge Notification indicators: ```typescript ``` ### Avatar User images: ```typescript JD ``` ## Form Example Complete form with validation: ```typescript Role setAgreed(e.target.checked)} />} label="I agree to the terms and conditions" /> ```