Crema React


For example, I want to remove the theme setting button from the default layout. First of all, I need to go to the libs/components/src/lib/AppLayout/DefaultLayout/index.js file, and to remove the customizer button, I need to remove <AppThemeSetting/> Tag.
In case you are using another layout go to the libs/components/src/lib/AppLayout/{Layout}/index.js and remove the <AppThemeSetting/> Tag.
Yes, You can remove the menus from the left sidebar. but we suggest that it would be great if you use the starter_template of your desired version. In case you want to remove a few menus from the template then you can follow the following steps
  1. 1.
    Go to the apps/source/src/core/AppRoutes/routeConfig.js file and remove the object that you don't want to use in your left sidebar. In the Next.js version please modify the apps/source/src/core/AppRoutes/routeConfig.js
  2. 2.
    Remove all unrelated routes from the src/page/index.js file. (Only for CRA)
  3. 3.
    Remove all unrelated files/modules from the apps/source/src/modules directory. And remove the unrelated routes (Only for CRA)
  4. 4.
    If you are using the Next.js version you need to remove from the apps/source/src/modules/ directory and routes from the apps/source/src/pages/ directory
We are using react-icons for the sidebar menu. you can check out these here:
There are a few simple steps to move apps into a separate project.
  1. 1.
    Copy the Mail folder into your project from the apps
  2. 2.
    Add the Mail app's route into your project and link it to your navigation(You can update the base path 'apps/mail' to as your project need.)
  3. 3.
    Copy AppsContainer from the core components
  4. 4.
    Copy the MailApp action and reducer file from the redux and link it to your app redux.
  5. 5.
    In case you want to use a fake API and database, please copy the DB file and mock API into your project(In case you want to integrate it with your API Please link your API to mail)
  6. 6.
    Please make sure you initialize APIs in your demo version.
If you are using the CRA version then go to libs/modules/src/lib/auth/Signin/SigninFirebase.js and remove the initialValues and follow a similar way for other types of authentication.
initialValues={{// remove this attribute of Formik
email: '[email protected]',
If you are using the Next.js Version of Crema. You should follow the same doc for the Next.js version.
If you are using the Typescript Version of Crema. You should follow the same doc for the TypeScript version. The folder structure and way of code style are the same for all versions of Crema.
To change the initial path you need to change the NX_INITIAL_URL value in the apps/source/.env file
If you want to assign the dynamic URL then you need to get your URL in the apps/source/src/core/AppRoutes/index.js file and assign it to the path: '/',.
const anonymousStructure = {
routes: errorPagesConfigs.concat([
path: '/',
element: <Navigate to={initialUrl} />,
path: '*',
element: <Navigate to="/error-pages/error-404" />,
To change the text of the menu you need to update the locale value to a particular messageId you need to follow the following steps to achieve that.
  • Copy your messageId. It looks like this "sidebar.apps.wall" in the below message
messageId: "sidebar.apps.wall",
  • Search it in your locale file in the src/shared/localization/locales/{locale}.json file and replace its value according to you.
"sidebar.apps.wall": "Wall App",
Go to the .env file and set NX_MULTILINGUAL to false.
Crema uses the default routing method in Next.js. In this routing method page route is based on the file and directory name.
To change the logo you need to go to the file libs/components/src/lib/AppLayout/components/AppLogo/index.js. You can modify this file according to your requirement.
import React from 'react';
import { Box } from '@mui/material';
import { useThemeContext } from '@crema/context/ThemeContextProvider';
import { alpha } from '@mui/material/styles';
import { ReactComponent as Logo } from '../../../../assets/icon/logo.svg';
import { ReactComponent as LogoText } from '../../../../assets/icon/logo_text.svg';
const AppLogo = () => {
const { theme } = useThemeContext();
return (
height: { xs: 56, sm: 70 },
padding: 2.5,
display: 'flex',
flexDirection: 'row',
cursor: 'pointer',
alignItems: 'center',
justifyContent: 'center',
'& svg': {
height: { xs: 40, sm: 45 },
<Logo fill={theme.palette.primary.main} />
mt: 1,
display: { xs: 'none', md: 'block' },
'& svg': {
height: { xs: 25, sm: 30 },
<LogoText fill={alpha(theme.palette.text.primary, 0.8)} />
export default AppLogo;
To stop the jump back to the top, you need to follow the following steps.
  1. 1.
    Go to the file libs/components/src/lib/AppLayout/components/VerticalNav/index.js and add the following code.
const {pathname} = useRouter();
useEffect(() => {
if (process.browser) {
if (pathname === item.url && document.getElementById(pathname)) {
setTimeout(() => {
.scrollIntoView({behavior: 'smooth', block: 'center'});
}, 1);
}, [pathname]);
2. Replace the following anchor tag in the same file VerticalItem/index.js
// Replace this with
<a style={{textDecoration: 'none'}}>
// Replace with this
<a style={{textDecoration: 'none'}} id={item.url}>
To change the Crema Current font you need to follow the following steps. 1. Go to the file apps/source/src/index.html and Replace the current Poppins font with your current font <link href="[email protected];200;300;400;500;600&display=swap"rel="stylesheet"> 2. Go to the file libs/constants/src/defaultConfig.js and replace the font family the in the Typography
export const defaultTheme = {
theme: {
typography: {
fontFamily: ['Poppins', 'sans-serif'].join(','),
3. Go to the file libs/constants/src/AppEnums.js update the Font weight according to your project.
export enum Fonts {
LIGHT = "300",
REGULAR = "400",
MEDIUM = "500",
SEMI_BOLD = "600",
BOLD = "700",
4. Go to the file apps/source/src/assets/styles/base.css and replace the current font family 'Poppins' with your current font in this file
Please let us know if you missed anything in the docs. We will add that asap.