Textarea that automatically adjusts height based on content.
Click on any breadcrumb to navigate (simulated)
Simulates file system navigation with folder icons
Product category navigation example
External links automatically show an icon and include proper rel attributes
Use component="button" for links that trigger actions instead of navigation
Click any link to see the event in console
This is a paragraph with
Default
Primary
Secondary
Grid-based responsive layout
Click outside the blue box to trigger the clickaway event. Check the console for messages.
This content is wrapped by a ClickAwayListener. Clicking inside this box will NOT trigger the clickaway event. Clicking outside will trigger it.
A practical example showing how to use ClickAwayListener with a dropdown menu.
Using ClickAwayListener to close a modal when clicking outside.
ClickAwayListener supports different mouse and touch events.
Triggers on mousedown outside
Triggers on mouseup outside
ClickAwayListener can be disabled to temporarily stop listening for clicks.
This listener is disabled and won't trigger clickaway events.
CssBaseline provides a consistent CSS reset and normalization for the entire document. It's typically used once at the root of your application.
<mui-css-baseline enableColorScheme></mui-css-baseline>
Note: The global CssBaseline is already active on this page. It provides consistent typography, removes default margins/padding, and sets up Material Design defaults.
This is a paragraph with bold text and italic text. It demonstrates the default typography styles applied by CssBaseline.
This is a link with the default Material Design styling.
ScopedCssBaseline applies baseline styles only to its children, allowing for localized normalization without affecting the global document styles.
This content uses the global baseline styles.
This content is wrapped in ScopedCssBaseline and inherits its normalized styles.
Both components support automatic dark mode detection when enableColorScheme is true.
This content will automatically adapt to the user's preferred color scheme (light or dark mode) when supported by the browser and operating system.
Links and text emphasis will also adapt to the color scheme.
color-scheme: light dark; is applied to enable automatic adaptation.
CssBaseline normalizes form elements for consistent appearance across browsers.
Baseline styles include proper formatting for code elements.
Inline code: const example = 'Hello World';
Code block:
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('World'));
Keyboard input: Press Ctrl + C to copy
CssBaseline includes accessibility improvements like focus indicators and reduced motion support.
Try tabbing through these focusable elements to see the focus indicators:
Note: Focus indicators automatically adapt to user preferences and support reduced motion settings for accessibility.
Click the button to open a basic modal dialog.
This is a basic modal dialog. You can close it by clicking the backdrop, pressing the Escape key, or using the close button.
Modal containing a form with proper focus management.
Test different modal configuration options.
This modal cannot be closed by clicking the backdrop. You must use the close button or press Escape.
This modal cannot be closed with the Escape key. You must click the backdrop or use the close button.
This modal has no visible backdrop, but you can still click outside to close it or press Escape.
This modal stays in the DOM even when closed, which can be useful for performance or maintaining state.
Test modals that open other modals (stacking).
This is the first modal. You can open another modal on top of this one.
This is the second modal, stacked on top of the first one.
Modal with comprehensive accessibility features and focus management.
This modal demonstrates accessibility features including proper ARIA attributes, focus management, and keyboard navigation.
Try these accessibility features:
Create and control modals programmatically using JavaScript.