Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated README.md #85

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 72 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -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:
Expand All @@ -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:
Expand Down