react-md
An accessible React component library styled with Sass/SCSS.
Styling
The styles for this library are built from the material design principals and provided through Sass. The styles can be configured compile-time by overriding the default Sass variables and run-time by using the provided Sass functions and mixins to safely update the custom properties for most components. Colors will automatically be updated to meet a minimum color contrast ratio while overriding default Sass variables and when using the provided Sass functions and mixins.
@use "@react-md/core/colors";
@use "@react-md/core" with (
$color-scheme: system,
$primary-color: colors.$teal-500,
$secondary-color: colors.$pink-a-200,
$button-text-border-radius: 1rem,
$button-horizontal-padding: 0.5rem,
$list-vertical-padding: 0.75rem,
$list-horizontal-padding: 0.25rem
);
@include core.styles;
.dark-container {
@include core.theme-set-var(background-color, #212121);
@include core.theme-set-var(color, #fff);
@include core.interaction-use-dark-surface;
}
Components and Hooks
On top of the powerful styling behavior, there are 100+ components, 60+ hooks, and 40+ utils provided to help speed up development. The provided low-level components generally provide simple styles and layout while the hooks provide reusable functionality throughout your application. More complex widgets will comply with the W3C ARIA authoring practices to enforce the correct screen reader accessibility and keyboard movement behavior.
Wow!
Multiple themes
55%