This is a Next.js project bootstrapped with create-next-app
.
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.
- 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.
This project was bootstrapped with Create React App.
- Node.js
- npm or yarn package manager
-
Clone the repository:
git clone https://github.com/yourusername/sakai-react.git cd sakai-react
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.
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.
The source code is organized for easy customization:
- Layout Components: Located in the
src
directory, includingApp.js
,AppTopbar
,AppFooter
,AppMenu
, andAppConfig
. - 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.
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.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.