Toggle the global CssBaseline component to see its effects on the entire page.
Compare typography with and without baseline styles.
This is a paragraph with bold text and italic text.
This is a paragraph with bold text and italic text.
Compare form element styling with and without baseline normalization.
Compare code styling with baseline normalization.
Inline code: const x = 42;
function example() {
return 'Hello World';
}
Keyboard: Ctrl + C
Inline code: const x = 42;
function example() {
return 'Hello World';
}
Keyboard: Ctrl + C
Test automatic dark/light mode adaptation.
This content uses default colors and won't adapt to system preferences.
This content will adapt to your system's light/dark mode preference.
Note: To test color scheme adaptation, change your system's dark/light mode setting or use browser developer tools to simulate different color schemes.
Test focus indicators and accessibility features.
Tab through these elements to see consistent focus indicators:
Focus indicators are automatically styled and respect user preferences for reduced motion.
Test multiple ScopedCssBaseline components on the same page.
This is the first scoped baseline area.
This is the second scoped baseline area with color scheme support.