Topic: MDB5 React Pro + next.js + FontAwesome Pro + custom theming

Sean Hanson free asked 2 years ago

I'm not sure how to get these three packages to work together, or even where to begin. The tutorial from 2 years ago is the only thing I've found and doesn't seem relevant unless I want to import all of the FontAwesome Pro styles, beyond which there are numerous issues claiming that it doesn't work with the React Pro kit.

Can someone point me to some snippets that would demonstrate how to get this up and running? I've used React in the past, and while I prefer Vue, circumstances have forced me into using Next. I'd really like to use your components to get this project off the ground and quick, but I feel like I'm stuck at first base, especially with the added hiccup of having to do custom theming for my client, who wants to use their brand colors and a TypeKit font they pay for.


P.S. Since this support forum apparently requires some code, here's where I'm at:


import "../styles/mdb5.scss";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;

export default MyApp;


@import "mdb-react-ui-kit/app/src/pro/scss/";

$utc-theme-primary: #bf0000;
$utc-theme-secondary: #141414;

$utc-theme: mdb-light-theme($utc-theme-primary, $utc-theme-secondary);

@include mdb-theme($utc-theme);

If you have already installed MDBReact 5 in your project, then you should be able to render MDB components :) Even in the _app.js file:

import "../styles/mdb5.scss";
import { MDBBtn } from 'mdb-react-ui-kit';

function MyApp({ Component, pageProps }) {
  return (
            <MDBBtn>Example button</MDBBtn>
            <Component {...pageProps} />

export default MyApp;

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 1.0.0-beta6
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No