Current Version

React 17.x and PrimeReact 7.x

Getting Started

Sakai is an application template for React based on the popular NextJS framework. To get started, clone the repository from GitHub and install the dependencies with npm or yarn.


"npm install" or "yarn"

Next step is running the application using the start script and navigate to http://localhost:3000/ to view the application. That is it, you may now start with the development of your application using the Sakai template.


"npm run dev" or "yarn dev"
Dependencies

Dependencies of Sakai are listed below and needs to be defined at package.json.


"primereact": "^8.6.0",                    //required: PrimeReact components
"primeicons": "^6.0.1",                    //required: Icons
"primeflex": "^3.2.1",                     //required: Utility CSS classes
"react-transition-group": "^4.4.1",     //required: PrimeReact animations
Structure

Sakai consists of a couple folders, demos and core has been separated so that you can easily remove what is not necessary for your application.

  • layout: Main layout files, needs to be present
  • demo: Contains demo related utilities and helpers
  • pages: Demo pages
  • public/demo: Assets used in demos
  • public/layout: Assets used in layout such as logo
  • styles/demo: CSS files only used in demos
  • styles/layout: SCSS files of the core layout
Menu

Main menu is defined at AppMenu.js file based on MenuModel API.

Integration with Existing NextJS Applications

Only the folders that are related to the layout needs to move in to your project. We've created a short tutorial with details.

PrimeReact Theme

Sakai theming is based on the PrimeReact theme being used. Default theme is lara-light-indigo.

SASS Variables

In case you'd like to customize the main layout variables, open _variables.scss file under src/layout folder. Saving the changes will be reflected instantly at your browser.

src/layout/_variables.scss

/* General */
$scale:14px;                    /* initial font size */ 
$borderRadius:12px;             /* border radius of layout element e.g. card, sidebar */ 
$transitionDuration:.2s;        /* transition duration of layout elements e.g. sidebar */
LogobyPrimeReact