Material 3 design system for React and Tailwind
Still on Active Development
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