diff --git a/README.md b/README.md index e449a5e1..d4c621fe 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,52 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/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](https://reactjs.org/) and [PrimeReact](https://www.primefaces.org/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](https://sakai.primereact.org/) + +## Table of Contents + +- [Sakai React](#sakai-react) + - [Features](#features) + - [Getting Started](#getting-started) + - [Prerequisites](#prerequisites) + - [Installation](#installation) + - [Getting Started](#getting-started-1) + - [Themes](#themes) + - [Customization](#customization) + - [Contributing](#contributing) + - [Learn More](#learn-more) + +## 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](https://github.com/facebook/create-react-app). + +### Prerequisites + +- **Node.js** +- **npm** or **yarn** package manager + +### Installation + +1. **Clone the repository**: + + ```bash + git clone https://github.com/yourusername/sakai-react.git + cd sakai-react + ## Getting Started First, run the development server: @@ -16,6 +63,31 @@ bun dev Open [http://localhost:3000](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: