Skip to content

abdelfattahmohand/sakai-react

 
 

Repository files navigation

This is a Next.js project bootstrapped with create-next-app.

Sakai React

Free and Open Source Admin Template for React

Sakai React is a free and open-source admin template built with React and PrimeReact. It provides a modern and customizable starting point for building admin interfaces and dashboards. Sakai React is fully responsive and works seamlessly on mobile devices.

Template Preview

Table of Contents

Features

  • Built with React and PrimeReact: Leverages the power of React and PrimeReact UI components for efficient development.
  • Customizable Layout: Includes core components like Top Bar, Footer, Menu, and Configuration to build your desired layout.
  • Responsive Design: Fully responsive, works on all devices including desktops, tablets, and mobile phones.
  • Multiple Theme Support: Compatible with various themes like Bootstrap, Material, Tailwind, Fluent UI, and PrimeOne's own themes, including the latest Lara theme.
  • Scalable Font Sizes: The entire layout scales based on the font size, allowing for easy customization.
  • Menu Modes: Supports static and overlay menu modes for different user experiences.

Getting Started

This project was bootstrapped with Create React App.

Prerequisites

  • Node.js
  • npm or yarn package manager

Installation

  1. Clone the repository:

    git clone https://github.com/yourusername/sakai-react.git
    cd sakai-react
    

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Themes

Sakai React offers extensive theme support, allowing you to customize the look and feel of your application effortlessly. The available themes include:

  • Bootstrap:
  • Material UI:
  • Tailwind CSS:
  • Fluent UI:
  • PrimeOne Themes:
  • Lara Theme:

You can easily switch between these themes to match your application's design requirements. All themes are open source and free to use.

Customization

The source code is organized for easy customization:

  • Layout Components: Located in the src directory, including App.js, AppTopbar, AppFooter, AppMenu, and AppConfig.
  • Menu Structure: The menu items are defined in App.js as a nested JSON structure. You can modify this structure or load it from an external source like a JSON file or database.
  • Styling: Customize the look and feel using CSS or by modifying the theme variables. The layout is scalable based on font sizes; increasing the body font size will scale up the entire application.

Contributing

We welcome contributions! Feel free to fork the repository and submit pull requests. We are especially interested in community efforts to port Sakai React to other frameworks like Next.js or to other ecosystems like Vue.js.

Learn More

To learn more about Next.js, take a look at the following resources:

Packages

No packages published

Languages

  • CSS 94.7%
  • TypeScript 5.0%
  • Other 0.3%