Fuse React is a complete React admin template that follows Google’s Material Design guidelines.
It has built-in page templates, routing and auth features. It also includes 5 example apps, 20+ pages, lots of reusable react components and more.
Fuse React admin template is not only a great kick starter for your project but it also is an extremely good place to learn some of the advanced aspects of the React.
This is the React version of the famous Fuse Angular Material admin template.
- React Redux
- Material-UI Next
- Create React App
- React Router 4
- Redux Thunk
- Material Icons
- Roboto typeface family by Google
- React Table
- Formsy React
- Google Map React
- React ChartJs 2
- Fuse React Template Demo Project (Fuse-React-vX.X.X-demo.zip)
- Fuse React Template Skeleton Project (Fuse-React-vX.X.X-skeleton.zip)
- Layered and well organized psds of the project design (PSDs.zip)
- Documentation file (Fuse-React-Documentation.pdf)
- Analytics Dashboard
- Project Dashboard
- File Manager
- Authentication Pages
- Login v2
- Register v2
- Forgot Password
- Forgot Password v2
- Reset Password
- Reset Password v2
- Lock Screen
- Mail Confirmation
- Coming Soon Page
- Error Pages
- Maintenance Page
- Profile Page
- Search Pages
- Pricing Page
- FAQ Page
- Knowledge Base Page
Configurable Template Layouts
- Left/Right Vertical Navigation
- Horizontal Navigation
- Folded Navigation
- Above/Below Toolbar
- Above/Below Footer
- JWT Authentication
- Auth0 Authentication
- Firebase Authentication
- Skeleton Project
- Code Splitting
- Custom color management
- 20+ content layouts
Fuse React supports all modern browsers (Chrome, Firefox, Safari, Edge).
IE11 is partially supported.
We are open to any kind of suggestions. If you have any feature ideas that you want to see in the future updates, please let us know. We will do our best to improve the theme based on your suggestions.
For your support requests, please use our Support Ticket System. We will get back to you within 48 hours in working days. Your request will be queued so please be patient and give us as much information as possible so we can quickly address and find a solution to your issue.
Support requests made via item comments, social networks and via any other media will not be answered so please open a support ticket in our support system.
NEW: Dependency packages updated (react v16.8.4 etc). setRef prop added to FuseAnimate. FIX: whitelist added to purgecss config for to prevent removing dynamically created navigation classes. Layout issues on safari <= v10
NEW: Dependency packages updated (react v16.8.3 etc). purgecss added to decrease file size of the production build. FIX: Fuse vertical navigation collapse items don’t have to be collapsed whenever navigation updated or location path changed. BREAKING CHANGES: src/styles/fuse-helpers.css renamed with src/styles/tailwind.css src/styles/fuse-helpers.tailwind.css renamed with src/styles/tailwind.base.css
NEW: Dependency packages updated (react v16.8.1, react-scripts etc). PSD files updated. FIX: Rendering Dom in "window.onload" function to wait all files loaded (esp css files). Theming issues (FuseCountdown, tables of Invoice pages).
NEW: Dependency packages updated (react, material-ui etc). FuseNavigation update,remove,append,prepend actions created, documentation page is updated. react-chartjs-2-defaults.js file created. FIX: react, react-dom are added to resolutions to prevent loading two versions of the react. + the issue's main reason is auth0-lock uses react as dependency not peerDependency and they don't change it with kinda valid reason (https://github.com/auth0/lock/issues/1148#issuecomment-336765301). Calendar App Header updating issue fixed.
NEW: Project Dashboard App added. External Link Item added to FuseNavigation (type:'link'). "metecons" extra icon fonts added. Dependency packages updated.
NEW: Notes App Added. Dependency packages updated. FIX: dir-glob error is fixed with globby 8.0.2 via locking it's version. (This error only occurs when you use npm to install node_modules instead of yarn). FuseSearch did not hide auth protected navigation items.
NEW: New theme layout added (layout-3) Container layout mode created for layout-2 and layout-3."container" class added to relevant places. FuseSidePanel created and used in layout-3. FuseNavigation: dense variant added for horizontal layout only. FuseShortcuts: vertical variant added. FuseSearch: basic variant added (checkout layout-3) dark-material-bg.jpg changed to gradient background. IconsUI page refined. Generating source map disabled by default on production build. Navigation data refactored on the demo. Documentation updated. Dependency packages updated. FIX: Codebase improvements. Some IE fixes. FuseAuthorization must have state to prevent restricted route component mount when unauthorized user redirects E-Commerce App, navigating product to new product didn't update the form state. Authentication timing issues fixed. BREAKING CHANGES: Theme layouts moved out of the @fuse core files which gives developers to create or edit theme layouts easily. Project structure changed after new layout system. Theme configuration state moved from FuseTheme to redux store (fuse.settings). Migrating to the new major version (v2.0.0) can be difficult because of the project structure and layout system changes.
NEW: Academy App added. FuseSearch Component added (located at the main toolbar and searches in the navigation). FuseChipSelect documentation page added. Dependency packages updated (Material-ui etc). FIX: Missing input variants added to Formsy Higher Order Components. FuseChipSelect variant styles fixed. FuseNavHorizontalItem missing exact prop added. E-Commerce App, navigating product to new product didn't update the form state. Authentication timing issues fixed.
NEW: JWT support added to Regular Authentication. FuseMessage variations added (error, success, alert, info). Dependency packages updated (Material-ui etc). FIX: FuseMessage relocated (position changed absolute to fixed). Hide navbar button when navbar display set to false on mobile. Layout-1 folded navigation mobile fix. react-router-config react-router-dom versions matched. tabs style fix for tabbed page layouts.
FIX: Theme Layout-1 Mobile fix (its correction after v1.2.5)
NEW: FuseDialog Component added to theme layout for easily show dialog messages via redux action. Dependency packages updated (Material-ui, react-redux etc). FIX: Layout-1 folded navigation broken in macOS safari browser.
NEW: Dependency packages updated (React, Material-ui etc)..
NEW: Dependency packages updated (Redux etc). Redux developer tools disabled on production. FIX: Redux Developer Tools Extension fix: problem occurs if the extension is enabled on Firefox
NEW: Initial loading time reduced with code splitting(lazy loading) components and also reducers redux-loadable library added FuseLoadable component created for to avoid repetition webpack-bundle-analyzer package added to devDependencies for to analyze build Material UI updated to v3.2.0 Dependency packages updated.
NEW: create-react-app updated to v2 Material UI updated to v3.1.2 Navigation active item style option added for to use square highlighting(old style). Dependency packages updated. E-commerce App data/assets updated. FIXES: Synthetically trigger event onChange for higher-order components of formsy. Edge, Ie font icon ligature fix.
Short summary of what’s new in create-react-app v2 from: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html
- More styling options: you can use Sass and CSS Modules out of the box.
- Updated to Babel 7, including support for the React fragment syntax and many bugfixes.
- Updated to webpack 4, which automatically splits JS bundles more intelligently.
- Updated to Jest 23, which includes an interactive mode for reviewing snapshots.
- Added PostCSS so you can use new CSS features in old browsers.
- You can use Apollo, Relay Modern, MDX, and other third-party Babel Macros transforms.
- You can now import an SVG as a React component, and use it in JSX.
- You can try the experimental Yarn Plug’n’Play mode that removes
- You can now plug your own proxy implementation in development to match your backend API.
- You can now use packages written for latest Node versions without breaking the build.
- You can now optionally get a smaller CSS bundle if you only plan to target modern browsers.
- Service workers are now opt-in and are built using Google’s Workbox.
NEW: The design is modernized with Google Material Design's new specs. + Icons replaced with outlined material icons, + Main Font Family changed to Muli Scrumboard App added. Material UI updated to v3.1.1 FuseChipSelect: "variant" attr added for to choose creatable or fixed multi selection. Dependency packages updated. @lodash path created to use lodash's mixins. Webkit scrollbar styles added. Auth Services(Auth0, Firebase) are revised for to easily disable. Various mobile device refinements applied. FIXES: Cleaner approach for Mail App.
NEW: E-commerce App added. FuseChipSelect Component added. Material UI updated to v3.0.2 Dependency packages updated.
NEW: FuseSplashScreen added. firebaseService and auth0Service created, Auth component added as entry point for authentication. Login, register pages updated due to adding Auth0 authentication. 404 page redirection added to the routes. Material UI updated to v1.5.1 Dependency packages updated. BREAKING CHANGES: FirebaseAuth Component removed, using Auth component instead.
NEW: Chat App added. Material UI updated to v1.4.3 Dependency packages updated.
NEW: Chat Panel added. LeftSidePanel RightSidePanel Layout areas added. Navbar style refined. Material UI updated to v1.4.0 Other Dependency packages updated.
NEW: Todo App added. Material UI updated to v1.3.1 Other Dependency packages updated.
NEW: Material UI updated to v1.3.0 Dependency packages updated.
NEW: Changing default settings with route params. Dependency packages updated. FIX: FuseAnimate, FuseAnimateGroup inject error. Folded Navigation extra space fixed between 960px and 1280px of window width.
NEW: velocity-react added as dependency, its used for fuseAnimation FuseAnimation FuseAnimationGroup created for easily animate components and applied most of the pages. exact property option added to navigation item for matching location exactly. Dependency packages updated.
NEW: Layout system enhanced. New Horizontal Layout added (layout-2). react-poper added as dependency, its used for horizontal navigation Material UI updated to v1.2.0 Dependency packages updated. FIX: Dialog form of Contacts App and Calendar App fixed due to React 16.4.0 bugfix for getDeriveredStateFromProps (https://reactjs.org/blog/2018/05/23/react-v-16-4.html#bugfix-for-getderivedstatefromprops). Actions and reducers of fuse navigation fixed. BREAKING CHANGES: Layout and Theme settings data structure changed. If you are storing the user data at database, old saved user settings will not work with this version. Page Layouts default scroll behaviour changed to singleScroll due to new layout mechanism, additional innerScroll attribute also added. FuseSettings separated from the settings panel.
NEW: Material UI updated to v1.1.0 Dependency packages updated. FIX: Extra control added if user.data exist in Firebase Db Navigation Collapse fixed due to React 16.4.0 bugfix for getDeriveredStateFromProps (https://reactjs.org/blog/2018/05/23/react-v-16-4.html#bugfix-for-getderivedstatefromprops).
BREAKING CHANGES: FuseAuth renamed with FuseAuthorization Shortcuts data storage moved under the user.data. NEW: Material UI updated to v1.0.0 Firebase integration added as an example for authentication (Also saves user data to firebase/db). Register Page Created for Firebase. FuseMessage Component added to theme layout for easily show snackbar messages via redux action.
NEW: Material UI updated to v1.0.0-rc.0 Checkout the breaking changes google-map-react updated.
FIXES: Tailwind error on windows. missing .env .babelrc files added.
NEW: All dependencies updated. FIXES: cross-env library added for absolute path across platforms.
Click here to access the Online Changelog.
All the images in the demo are for demonstration purposes only and are not included into the theme package.