@mavvy/m3-ui

v1.2.12

Published

a month ago

Material 3 UI React and Tailwind

Downloads

323

0High
0Medium
0Low

mavvystudio

react tailwind material-3 ui component

M3-UI - Material 3 React and Tailwind (Beta)

Material Design at Its Core

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!

Setup

Install

npm install @mavvy/m3-ui

Setup Tailwind

Make sure you already setup your tailwind on your app

Install Tailwind

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:

M3-UI Documentation

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