UI Kit - The Front
Material React Landing Pages Kit made with Material-UI's components, React and of course create-react-app to boost your app development process! A professional React Kit that comes with plenty of ready-to-use Material-UI components that will help you to build faster & beautiful Fontend pages. Each component is fully customizable, responsive and easy to integrate.
Built with
- React
- Material-UI v4
Quick start with React Scripts
- Download the theme
- Make sure your NodeJS and npm versions are up to date for
React 16.8.6 - Install dependencies:
npm install - Start the server:
npm run start - Views are on:
localhost:3000 - Build on production:
npm run build
Folder structure
In the root folder there are 2 folders:
- public Here are the public assets, images and
index.htmlfile. - src Here is the main business logic of the theme.
- |----components The reusable and stand-alone components are stored here, by following Atomic Design Methodology
- |----|----atoms These are small functional components that are not using any other atomic components
- |----|----molecules Tese are those functional components which have dependencies from other atoms
- |----|----organisms These are the functional components that are using other molecules and atoms
- |----layouts
- |----|----Main The main layout: header navigation, the main container and footer part
- |----|----Minimal The minimal layout
- |----theme In this folder there are overrides of the default color palette and typography coming from MUI
- |----views All the views/pages that are available. Here are the combination and composition of re-usable components and pages representations.
Landing Pages Built For Customization
theFront landing page examples can be used out of the box, but since they’re built on flexible components, you can also create new pages all your own with ease. Copy-paste a section here, a component there, switch up a few variables, and you have an entirely new landing!
In the extended version of the kit you will get:
The full list of pages
- More than 45 pages
- 300+ component compositions
- 30+ stand-alone components
- create-react-app scripts support
- NextJS and server side rendering support
Overview Of All Pages
Development Highlights
We built Thefront to make you be able to customize and extend our components as simple as the Material UI core itself.
- Component-centric atomic design architechture
- Customization made easy with stand alone components
- Browsersync live reload
- Fully responsive on all modern browsers
- Rich documentation with code samples and parameters/options
Design Highlights
theFront was designed as a rich system from the start, which is reflected in both the end result and the original design.
- Beautiful, modern style flexible enough to suit most brands
- Included Sketch design file
- Type styles, color styles, and components for easy file-wide changes
- All images are included with a free-to-use license
- Icon set provided by Font Awesome Kit
MUI Documentation
The full documentation for the React Material Kit can be found here.
Upgrade to PRO
You can updrade to use the PRO version and access to all the pages & components here.