@paulobrandao/react-material NPM

React Material

React Material is a component library that is built based on the principles of the Material 3 design system.

Coverage

This isn't the official release yet, just a beta release to validate the development while the documentation is writing.

Quick setup

First - Install

npm i @paulobrandao/react-material

Second - styling

Import the required stylesheet into RootLayout or your (main|index).ts:

import '@paulobrandao/react-material/dist/react-material.css';

To make use of MaterialSymbol component, it is necessary to import the icon font stylesheet too, according to the style chosen:

// Outlined
import '@paulobrandao/react-material/dist/react-material-symbols-outlined.css';
// Rounded
import '@paulobrandao/react-material/dist/react-material-symbols-rounded.css';
// Sharp
import '@paulobrandao/react-material/dist/react-material-symbols-sharp.css';

Third - Theming

For correct use of the components and to customize the interface, it is necessary to fill some CSS variables. You have some utils to do this task.

You just need to pass the main color of your interface, the color scheme (“light” or “dark”) and the font face names and the util will make the job.

More info about theme utils in the Utils section of this page.

For each necessity, a specific util is applied:

With Next.js

In this case, the right way is to set these vars on server side, with the RootLayout:

import { applyThemeOnHtmlStyleTag } from '@paulobrandao/react-material/utils';
...

return (
  <html
    style={applyThemeOnHtmlStyleTag({
      seedColor: '#4285F4', // main color as hex
      colorScheme: 'dark', // the recommendation is to use a cookie value
      font: { // if you prefer to make use of Next.js font variable, just set `false` here
        title: '"Roboto"', // or set the `--font-title` var
        content: '"Roboto"', // or set the `--font-content` var
        code: '"Roboto Mono"', // or set the `--font-code` var
      },
    })}
  >
    <body>{children}</body>
  </html>
);

With client

In this case, call the applyTheme util into (main|index).tsx:

import { applyTheme } from '@paulobrandao/react-material/utils';
// before createRoot
applyTheme({
  seedColor: '#4285F4',
  colorScheme: 'light',
  font: {
    title: '"Roboto"',
    content: '"Roboto"',
    code: '"Roboto Mono"',
  },
});

Setup done! Just start to make use.

Components

This list is organized according to Material Docs.

Style
- ~~MaterialSymbols~~
Actions
- ~~Button~~
- ~~IconButton~~
- FloatActionButton (coming soon)
- SegmentedButton (planning)
Communication
- Snackbar (coming soon)
- Tooltip (partially available with IconButton)
- Badges (planning)
- Progress (planning)
- RichTooltip (planning)
Containment
- ~~Divider~~
- ~~Card~~
- ~~Dialog~~
- List (coming soon)
- SideSheet (coming soon)
- BottomSheet (coming soon)
- Carousel (planning)
Navigation
- ~~Appbar~~
- ~~Navbar~~
- ~~Navdrawer~~
- ~~Navrail~~
- Tabs (coming soon)
Selection
- Checkbox (coming soon)
- Chip (coming soon)
- Menu (coming soon)
- RadioButton (coming soon)
- Switch (coming soon)
- DatePicker (planning)
- Slider (planning)
- TimePicker (planning)
Form
- Search (coming soon)
- SelectField (coming soon)
- TextField (coming soon)
Layout
- ~~Box~~

Utils

Theme utils

These functions will help you to create dynamic color schemes by the content-based color of your product/application.

`applyThemeOnHtmlStyleTag`

Solution to server side render

This function returns the CSS variables required to customize the library components as CSSProperties and need to be applied in the style prop of the <html> tag.

import { applyThemeOnHtmlStyleTag } from '@paulobrandao/react-material/utils';
...

return (
  <html
    style={applyThemeOnHtmlStyleTag({
      seedColor: '#4285F4',
      colorScheme: 'dark',
      font: {
        title: '"Roboto"',
        content: '"Roboto"',
        code: '"Roboto Mono"',
      },
    })}
  >
    <body>{children}</body>
  </html>
);

`applyThemeOnHtmlStyleTag` types

type FontSettings = {
  title?: string;
  content?: string;
  code?: string;
};

type Settings = {
  seedColor: string; // content-based color of your product/application
  colorScheme: 'dark' | 'light;
  font: FontSettings | false;
}

function applyThemeOnHtmlStyleTag(settings: Settings): CSSProperties

`applyTheme`

Solution to client side render

This function applies the CSS variables required to customize the library components in the document element.

import { applyTheme } from '@paulobrandao/react-material/utils';
// before createRoot
applyTheme({
  seedColor: '#4285F4',
  colorScheme: 'light',
  font: {
    title: '"Roboto"',
    content: '"Roboto"',
    code: '"Roboto Mono"',
  },
});

`applyTheme` types

type FontSettings = {
  title?: string;
  content?: string;
  code?: string;
};

type Settings = {
  seedColor: string; // content-based color of your product/application
  colorScheme: 'dark' | 'light;
  font: FontSettings | false;
}

function applyTheme(settings: Settings): void

@material/material-color-utilities clsx react react-dom

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago