Elevate your web development projects with M3-UI, a sleek and versatile React component library built on the foundations of Material Design.
Highly customizable using CSS Variables or you can just simply add Tailwind css classes to the components!
npm install @mavvy/m3-uiMake sure you already setup your tailwind on your app
tailwind.config.ts
const preset = require('@mavvy/m3-ui/preset');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: preset.content,
theme: {
extend: preset.theme.extend,
},
plugins: preset.plugins
};globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-primary: 77 152 41;
--icon-font-family: Material Symbols Outlined;
}
}html
<head>
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
rel="stylesheet"
/>
</head>See all the components at:
--color-primary
--color-primary-light
--color-primary-dark
--color-on-primary
--color-primary-container
--color-on-primary-container
--color-secondary
--color-secondary-light
--color-on-secondary
--color-secondary-container
--color-on-secondary-container
--color-tertiary
--color-on-tertiary
--color-tertiary-container
--color-on-tertiary-container
--color-surface-container-low
--color-surface-container-lowest
--color-surface-container
--color-surface-container-high
--color-surface-container-highest
--color-on-surface-container-highest
--color-on-surface
--color-on-surface-variant
--color-outline
--color-outline-variant
--color-error
--color-on-error
--color-error-container
--color-on-error-container
--color-scrim
--color-inverse-surface
--color-on-inverse-surfaceprimary
on-primary
primary-container
secondary
on-secondary
secondary-container
tertiary
on-tertiary
tertiary-container
surface-container-lowest
surface-container-low
surface-container
surface-container-high
surface-container-highest
on-surface
on-surface-variant
surface-container
outline
outline-variant
success
info
warning
error
on-error
on-error-container
inverse-surface
on-inverse-surfaceoutlined
rounded
sharpsmall
medium
largedisplay
headline
title
label
body