Documentation
Get Started

Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular v19 with PrimeNG v19. In case CLI is not installed already, use the command below to set it up.

npm install -g @angular/cli

Once CLI is ready in your system, extract the contents of the zip file distribution, cd to the directory, install the libraries from npm and then execute "ng serve" to run the application in your local environment.

git clone https://github.com/primefaces/sakai-ng
npm install
ng serve

The application should run at http://localhost:4200/ to view the application in your local environment.

Structure

Templates consists of a couple folders, demos and layout have been separated so that you can easily identify what is necessary for your application.

  • src/app/layout: Main layout files, needs to be present.
  • src/app/pages: Demo content like Dashboard.
  • src/assets/demo: Assets used in demos
  • src/assets/layout: SCSS files of the main layout
Menu

Main menu is defined at src/app/layout/component/app.menu.ts file. Update the model property to define your own menu items.

Layout Service

src/app/layout/service/layout.service.ts is a service that manages layout state changes, including dark mode, PrimeNG theme, menu modes, and states.

Tailwind CSS

The demo pages are developed with Tailwind CSS however the core application shell uses custom CSS.

Variables

CSS variables used in the template are derived from the applied PrimeNG theme. Customize them through the CSS variables in src/assets/layout/variables.