For installation, download the package into your project directory.

$ yarn add xf-material-components


$ npm install xf-material-components

For React projects import GlobalStyle into the root of your app and add the GlobalStyle component into your code.

// App.js

import GlobalStyle from 'xf-material-components/config/global.styles'

function App() {
  return (
    <div className="App">
      <GlobalStyle />
      <header className="App-header">
        <h1>Hello World</h1>

For next.js projects, import the rootStyle into your index.js file.

// index.js

import 'xf-material-components/config/rootStyle.css'

Now you can import the components you’d like to use in your project.

import { Button } from 'xf-material-components'
export default function myFunction() {
  return (
    <Button />

04 Nov 2021

Calvin Hutcheon