codedthemes / berry-free-react-admin-template

Berry free react material-ui admin template for easing and faster web development.

Berry Free React Material UI Admin Template

Berry is a free Material UI admin dashboard template built with React. It is meant to provide the best possible User Experience with highly customizable feature-rich pages. It is a complete Dashboard Template that has easy and intuitive responsive design whether it is viewed on retina screens or laptops.

⭐ ⭐ ⭐ Do not forget to star (Top right of this page) it if you like the theme ⭐ ⭐ ⭐

Pro version of Berry react template contains features like TypeScript, Next.js Seed versions, Apps, Authentication Methods (i.e. JWT, Auth0, Firebase), Advance Components, Form Plugins, Layouts, Widgets, and many more.

Berry Free	Berry
9 Demo pages	45+ demo pages
-	✓ Multi-language
-	✓ Dark/Light Mode 🌓
-	✓ TypeScript version
-	✓ Design files (Figma)
-	✓ 6+ color Options
-	✓ RTL
-	✓ JWT, Firebase, Auth0 authentications
-	✓ More components

Why Berry?

Berry offers everything you need to create dashboards. We have included the following high-end features in our initial release:

• Modern aesthetics UI design
• Material-UI components
• Fully Responsive, all modern browser supported
• Easy to use code structure
• Flexible & High-Performance code
• Easy Documentation Guide

Free Berry React version

Preview

• Demo

Download

• Download from GitHub

Berry Pro version

Preview

• Demo

Purchase

• Purchase from MUI Store

Table of contents

• Getting Started
• Documentation
• Technology Stack
• Author
• Issues?
• License
• More Free Angular Templates
• More Pro Angular Templates
• Follow us

Getting Started

Clone from Github

git clone https://github.com/codedthemes/berry-free-react-admin-template.git

Documentation

Berry documentation helps you with installation, deployment, and troubleshooting.

Technology Stack

• Material UI V5
• Built with React Hooks API
• Redux & React Context API for State Management
• React Router for Navigation Routing
• Support of react-script
• Code Splitting
• CSS-in-JS where CSS is composed using JavaScript instead of defined in external files

Author

Berry is developed by Team CodedThemes.

Issues

To report a bug, please submit an issue on Github. We will respond as soon as possible to resolve the issue.

License

• Licensed cover under MIT

Berry - Nodejs version by Appseed

• Free Nodejs
• Premium Berry Nodejs

More Free React Material Admin Templates

• Free Materially
• Free Mantis
• Free Datta Able

More Premium React Material Admin Templates

• Mantis
• Materially
• Datta Able

Follow us

• Website
• Blog
• CodedThemes
• Dribbble
• Facebook
• 𝕏 (Twitter)

berry-free-react-admin-template's Issues

Help with protected the urls

I'm a beginner in React JS and I chose Berry because it seems straight forward enough and uses all the tech stack that I am using. I got stuck somewhere and I hope you can assist (I know you have this in the Pro version but I'm not yet at the stage of buying, hopefully soon) I need to control who has access to the dashboard, how do I implement the AuthGuard/Protect my urls such that only authenticated users have access to the Dashboard? I guess this ties in with token refresh when it expires.

Landing Page

I am new to react js and i want to do a landing page.

Currently we have the APP that points to the Routes (dashboard)

        <StyledEngineProvider injectFirst>
            <ThemeProvider theme={theme(customization)}>
                <CssBaseline />
                <NavigationScroll>
                    <Routes />
                </NavigationScroll>
            </ThemeProvider>
        </StyledEngineProvider>

How can we have a landing page that will have the register/login and after that can redirect to the dashboard? Thank you

trying to run npm start, error : Failed to load config "airbnb" to extend from.

how to change selected color in side menu bar .

Issue Yarn Compilation + Server start

Hello,

I tried to run the project on Macos BigSur 11.6 with those versions of plugins :
Node v14.18.3
Yarn v1.22.17

I have imported the GIT project in VSCode and then executed those commands

yarn

I ve got this log

Sebastiens-MacBook-Pro-2:react-ui sebastient$ yarn
yarn install v1.22.17
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "@emotion/styled > @emotion/[email protected]" has unmet peer dependency "@babel/core@^7.0.0".
warning "@emotion/styled > @emotion/babel-plugin > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning " > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 >= 3.2.0-dev >= 3.3.0-dev >= 3.4.0-dev >= 3.5.0-dev >= 3.6.0-dev >= 3.6.0-beta >= 3.7.0-dev >= 3.7.0-beta".
warning "@material-ui/codemod > [email protected]" has unmet peer dependency "@babel/preset-env@^7.1.6".
warning "@material-ui/codemod > [email protected]" has incorrect peer dependency "jscodeshift@^0.7.0 ^0.8.0 ^0.9.0 ^0.10.0 ^0.11.0".
warning "@material-ui/codemod > jscodeshift-add-imports > [email protected]" has incorrect peer dependency "jscodeshift@^0.7.0 ^0.8.0 ^0.9.0 ^0.10.0 ^0.11.0".
[--------------------------------------------------------------------------------------------------------------------------------------------------] 0/2143
error An unexpected error occurred: "ENOSYS: function not implemented, symlink '../../../parser/bin/babel-parser.js' -> '/Users/sebastient/pCloud Drive/My Documents/02_Pro/10_Trading/Flask_React/flask-react-berry-dashboard/react-ui/node_modules/@babel/core/node_modules/.bin/parser'".
info If you think this is a bug, please open a bug report with the information provided in "/Users/sebastient/pCloud Drive/My Documents/02_Pro/10_Trading/Flask_React/flask-react-berry-dashboard/react-ui/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

After I tried to launch the server

yarn start

I ve got that error log

Failed to compile.

Failed to load plugin 'prettier' declared in '.eslintrc': Cannot find module 'eslint-plugin-prettier'
Require stack:

• /Users/sebastient/.config/yarn/global/node_modules/react-scripts/config/placeholder.js

I hope you will find a solution and will be able to help me

Thank you

how to remove "/free" from Url

Template

Question: how can I change the redirect url when the login is successful?

At the moment it points to dashboard because of the default, my default is Home but when I log in it points to home, I want to change it to point to something else without changing the default url.
I am looking at the success but only see a dispatcher and submit. Any ideas, thank you

Click not working in small media

Describe the bug
Open site in mobile and try to open menu.

To Reproduce
Open site in mobile and try to open menu.

Expected behavior
It should open menu

Screenshots
N/A

Desktop (please complete the following information):

Smartphone (please complete the following information):

• Device: iPhoneX
• OS: 15
• Browser safari
• Version

Additional context
Add any other context about the problem here.

"https://berrydashboard.io/" demo site seems down

https://berrydashboard.io renders an empty page. https://berrydashboard.io/free/ is ok thought.

Production build - Not working

The dev mode is running as expected, but the production build is bumps a blank page and many errors in the console:

[Wed Jul 07 20:15:41 2021] ::1:53014 [404]: /demos/admin-templates/berry/react/static/css/3.03ebe89f.chunk.css - No such file or directory
[Wed Jul 07 20:15:41 2021] ::1:58156 [404]: /demos/admin-templates/berry/react/static/css/main.03ea965b.chunk.css - No such file or directory
[Wed Jul 07 20:15:41 2021] ::1:60829 [404]: /demos/admin-templates/berry/react/static/js/3.e2a8a729.chunk.js - No such file or directory
[Wed Jul 07 20:15:41 2021] ::1:56956 [404]: /demos/admin-templates/berry/react/static/js/main.7c1cf16c.chunk.js - No such file or directory
[Wed Jul 07 20:15:41 2021] ::1:49493 [404]: /demos/admin-templates/berry/react/static/js/3.e2a8a729.chunk.js - No such file or directory
[Wed Jul 07 20:15:41 2021] ::1:51447 [404]: /demos/admin-templates/berry/react/static/js/main.7c1cf16c.chunk.js - No such file or directory
[Wed Jul 07 20:15:41 2021] ::1:59220 [404]: /demos/admin-templates/berry/react/favicon.svg - No such file or directory
[Wed Jul 07 20:16:09 2021] ::1:65362 [404]: /serviceworker.js - No such file or directory

Steps to reproduce the issue:

1 - clone the repo
2 - Install deps via yarn
3 - Exec the production build yarn build
4 - visualize the files generated in the build directory

Thanks in advance for your help

#When I deploy to Netlify does not work

locally it works fine but on netlify or heroku just a blank page, even though i didn't make any changes on any file

help wanted: Highlight only the selected menu item not the ListItem button when the LIST is open.

Hello,

Thank you for the wonderful theme.

Currently, if a page/link/item is selected that will be highlighted, and if the List is open the background of the Button is set to be the same as the selected link.

How can I disable that highlighted background of the button if the list is only open, Only want that to be highlighted when the inner item is clicked/selected?

For example here:

I am on the Shadow Page and The ICONS list is only open, yet the background is the same as the selected page.
I want the background of the list only to be active when the nested items of the list are selected.

I want it like this: (done this using the inspect element)
Is there any simple solution to achieve this? I tried removing the SELECTED prop from the navCollapse but it removes the background from other items too.

PLEASE UPDATE THIS PROJECT.. PROJECT BUILD NOT WORKING

project runs using npm start.. but whenever I create a build for this project, it doesn't work.. kindly update the project along with dependencies

`className` did not match

react-dom.development.js:86 Warning: Prop className did not match. Server: "MuiButtonBase-root custom-10d1a0h-MuiButtonBase-root" Client: "MuiButtonBase-root css-10d1a0h-MuiButtonBase-root"

404 page not working

Hi @codedthemes
You did really good job. I liked it <3

But, I faced an issue. When I enter a non routed page, I am not getting 404 page instead i got the default page.

Thanks

Bug: Set Menu highlighted when browser back

Describe the bug
Navigating the browser programmatically using useNavigate doesn't update the highlighted menu item.

Fixes in v3.1.2 of the premium version.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Demo unavailable

Hi,

I tried to check out the online demo, but the link seems broken.

Could you update the readme with a fresh link?

Plans for the free version

Are there any plans for the free version? A roadmap in the readme would be helpful

Scrolling on mobile view in edge on login pages not possible

Describe the bug
When visiting https://berrydashboard.io/free/pages/login/login3 on edge (for desktop) and using the dev tools to set the viewport to a smartphone, it's not possible to scroll down the page.
On firefox and on my real smartphone (chrome) it does work.

Expected behavior
Its possible to scroll to the rest of the page

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS] Win 11
• Browser [e.g. chrome, safari] Edge
• Version [e.g. 22] latest

Optimization: Remove repetitive use of darkTitle prop and instead use ternary conditional to render appropriate title

In the MainCard.js component linked here, the darkTitle prop is used to determine whether to use a Typography component with the variant of "h3" or not. The code checks the value of the darkTitle prop and, if it is true, it renders a Typography component with the variant of "h3", otherwise, it renders the title prop as is.

Instead of having repeated checks for darkTitle, we can use a ternary operator to check the value of darkTitle and conditionally render the title prop with or without the Typography component. This makes the code simpler and more readable.

Current code:

After optimizing:

There are no directories in pricing version

views directory exists in demo version but not in standard+ version (next.js + typescript)
Can i get the views directory??

Question: Blank page

Hey Berry,

After running the app couple of times, I am getting blank page now. No errors in the console only 1 warning, any ideas what can be the reason?

There is a bug in showing searchpanel when switching from MobileView

Cannot install with set dependencies

When i install the dependencies i get the below error. Need to use right dependency versions in the code.

While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from @mui/[email protected]
npm ERR! node_modules/@mui/styles
npm ERR! @mui/styles@"^5.8.6" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\HP\AppData\Local\npm-cache\eresolve-report.txt for a full report.

Selected menu item is not updated on logo click

Description

When navigating the left menu and then click on logo to go to the home page the selection index stays on the last selected page and not the home page.

Steps to reproduce

1. Go to any page by clicking on left menu (select any item excluding default one)
2. Click on logo

Expected behavior

Default page is selected (in our case - Dashboard).

Screenshots

Environment

• OS: any
• Browser: any
• Version: recent (master branch)

in a form wizard I can add the hover effect while cursor at the checkbox

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Meet issue when deploy the template to firebase

I can run the app successfully locally on http://localhost:3000/free

however when I try to deploy it to firebase to host my website I meet issue:

after firebase init my project
I run firebase deploy this website
https://web3passport.web.app to the firebase when I open with chrome extension and I meet this issue:

<noscript>You need to enable JavaScript to run this app.</noscript>

Any suggestion?

MUI v5-beta to Release

With the release of MUI v5, are there any plans to migrate the Berry templates to the new version? Looks like with the existing @mui/codemod migration script there are still issues with the stylized format of the template, especially when utilizing typescript

change "Twitter" to "𝕏 (Twitter)" In README.md Follow us Section

Twitter Badge is updated to new logo badge in README.md

In Follow us section:

Currently:

Suggested Change:

customer

Hi, how to add vite in this template?

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Information

Is it completely free to use?

Auto choose first option after clicking on dropdown (in sidebar)

I think this would be a pretty cool idea because I've encountered more than once that the name of a dropdown list is also the name of 1 option in it that could be selected automatically instead of forcing an extra click

Left menu collapses on refresh

Left menu is collapsed on page refresh. Any suggestions or help?