@mavvy/m3-ui
v1.2.1
Published
Material 3 UI React and Tailwind
Downloads
33
Maintainers
Readme
M3-UI - Material 3 React and Tailwind
Material 3 design system for React and Tailwind
Still on Active Development
Setup
Install
npm install @mavvy/m3-ui
Setup Tailwind
Make sure you already setup your tailwind on your app
Configuration
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,[email protected],100..700,0..1,-50..200"
rel="stylesheet"
/>
</head>
Components
See all the components at:
CSS Variables
--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-surface
Types
Color
primary
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-surface
Icon Variant
outlined
rounded
sharp
Size
small
medium
large
Text Variant
display
headline
title
label
body