{"id":14975128,"url":"https://github.com/boadusamuel/laravel-inertia-react","last_synced_at":"2025-10-25T14:38:02.036Z","repository":{"id":205587424,"uuid":"714361385","full_name":"boadusamuel/laravel-inertia-react","owner":"boadusamuel","description":"Simple Laravel Inertia React Dashboard Template with PrimeReact and Sakai Custom CSS","archived":false,"fork":false,"pushed_at":"2025-02-25T19:16:12.000Z","size":4323,"stargazers_count":41,"open_issues_count":2,"forks_count":18,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-29T15:18:38.269Z","etag":null,"topics":["breeze","inertia","laravel10","primereact","react","sanctum"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/boadusamuel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-04T17:20:29.000Z","updated_at":"2025-05-27T07:50:45.000Z","dependencies_parsed_at":"2024-04-27T18:27:15.347Z","dependency_job_id":"aa300b89-7dc4-421c-a852-1753a9857f5e","html_url":"https://github.com/boadusamuel/laravel-inertia-react","commit_stats":null,"previous_names":["boadusamuel/laravel-inertia-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/boadusamuel/laravel-inertia-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boadusamuel%2Flaravel-inertia-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boadusamuel%2Flaravel-inertia-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boadusamuel%2Flaravel-inertia-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boadusamuel%2Flaravel-inertia-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/boadusamuel","download_url":"https://codeload.github.com/boadusamuel/laravel-inertia-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boadusamuel%2Flaravel-inertia-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273555459,"owners_count":25126316,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-04T02:00:08.968Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["breeze","inertia","laravel10","primereact","react","sanctum"],"created_at":"2024-09-24T13:51:33.324Z","updated_at":"2025-10-25T14:37:56.997Z","avatar_url":"https://github.com/boadusamuel.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"#\"\u003e\u003cimg src=\"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57ge2v8fp17lcd8vmf1a.png\" width=\"400\" alt=\"LaraReact\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## About LaraReact Dashboard Template (Laravel 10)\n\nLaraReact Dashboard Template is a Laravel Inertia and React-based web application template designed with inspiration from [Sakai PrimeReact](https://sakai.primereact.org/) for creating modern and interactive dashboard applications. This template provides you with a solid foundation for building powerful web applications with features such as:\n\n- [Laravel-based backend](https://laravel.com)\n- [Inertia.js](https://inertiajs.com) for seamless SPA development\n- [React](https://reactjs.org) for creating dynamic user interfaces\n- [PrimeReact](https://www.primefaces.org/primereact) UI components for a polished look and feel\n- [Sakai-react](https://github.com/primefaces/sakai-react) Free React Admin Template CSS\n- [Vite](https://vitejs.dev/) for faster development experience\n\nLaraReact Dashboard Template is aimed at Laravel developers who want to kickstart their project development with a ready-made template that incorporates these technologies.\n\n## Getting Started\n\nTo get started with LaraReact Dashboard Template first clone the [LaraReact Dashboard Template](https://github.com/boadusamuel/laravel-inertia-react) repository.\n\n**Clone Repository:**\n   ```bash\n   git clone https://github.com/boadusamuel/laravel-inertia-react\n   ```\n\n## Frontend\n```shell\n$ npm install\n$ npm run dev\n```\n\n## Backend\n```shell\n$ cp .env.example .env\n$ composer install\n$ php artisan key:generate\n$ php artisan serve\n```\n\n# Project Settings\n\nThe `AppConfig` component is a React component designed to provide a user interface for configuring the layout settings of the project. It utilizes the PrimeReact library for UI components and leverages context provided by the `LayoutContext` and `PrimeReactContext` to manage and apply configuration changes.\n\n\n## Table of Contents\n\n- [Usage: Accessing AppConfig Button on the Dashboard](#usage-accessing-appconfig-button-on-the-dashboard)\n- [Configuration Options](#configuration-options)\n    - [Scale](#scale)\n    - [Menu Type](#menu-type)\n    - [Input Style](#input-style)\n    - [Ripple Effect](#ripple-effect)\n    - [Themes](#themes)\n- [Usage: Applying Selected Theme to App.blade.php](#usage-applying-selected-theme-to-appbladephp)\n\n\nUsage: Accessing AppConfig Button on the Dashboard\n--------------------------------------------------\n\nThe `AppConfig` component provides a convenient way to access and customize the layout settings directly from the dashboard interface. Follow these steps to utilize the AppConfig button:\n\n1.  Navigate to the Dashboard:\n\n2.  Locate AppConfig Button:\n\n    -   Look for the configuration button represented by a cog icon typically positioned on the right center of the screen.\n3.  Click the AppConfig Button:\n\n    -   Once you've located the AppConfig button, click on it to open the configuration sidebar.\n4.  Adjust Configuration Options:\n\n    -   The sidebar will reveal various configuration options:\n        -   Scale: Adjust the font size of the application.\n        -   Menu Type: Choose between \"Static\" and \"Overlay\" menu types.\n        -   Input Style: Select between \"Outlined\" and \"Filled\" input styles.\n        -   Ripple Effect: Toggle the ripple effect on user interactions.\n        -   Themes: Choose from a variety of themes categorized by design systems (Bootstrap, Material Design, etc.).\n5.  Preview Changes:\n\n    -   Visualize the changes in real-time as you adjust the configuration options.\n6.  Apply Theme:\n\n    -   For theme changes, click on the theme button of your choice to apply the selected theme and color scheme to the entire application.\n7.  Close AppConfig Sidebar:\n\n    -   After configuring the settings, you can close the AppConfig sidebar by clicking outside the sidebar or using any provided close button.\n\nConfiguration Options\n---------------------\n\nThe `AppConfig` component provides a sidebar with various configuration options that can be adjusted to customize the project's layout and appearance. These options include:\n\n### Scale\n\nThe \"Scale\" section allows users to adjust the font size of the application. Users can increment or decrement the scale and visualize the changes in real-time.\n\n### Menu Type\n\nThe \"Menu Type\" section provides options to select the layout's menu mode. Users can choose between \"Static\" and \"Overlay\" menu types, influencing the navigation experience.\n\n### Input Style\n\nThe \"Input Style\" section lets users choose between \"Outlined\" and \"Filled\" input styles, influencing the appearance of input fields in the application.\n\n### Ripple Effect\n\nThe \"Ripple Effect\" section includes a toggle switch to enable or disable the ripple effect on user interactions.\n\n### Themes\n\nThe \"Themes\" section categorizes available themes into different design systems:\n\n-   Bootstrap\n-   Material Design\n-   Material Design Compact\n-   Tailwind\n-   Fluent UI\n-   PrimeOne Design - 2022\n-   PrimeOne Design - 2021\n\nFor each design system, multiple theme options are provided, each represented by a button with a preview image. Clicking on a theme button applies the selected theme and color scheme to the application.\n\nFeel free to explore and customize these options according to the desired look and feel of the \"use client\" project.\n\n\nUsage: Applying Selected Theme to App.blade.php\n-----------------------------------------------\n\nOnce you have chosen a preferred theme, follow these steps to integrate the selected theme into the `app.blade.php` file:\n\n1.  Choose a Theme:\n\n    -   Using the AppConfig sidebar, select your preferred theme from the available options.\n\n2. Navigate to app.blade.php:\n\n    -   Locate the `app.blade.php` file in your project's `resources/views` directory.\n3. Paste Link in Head Section:\n\n    -   Open the `app.blade.php` file and locate the `\u003chead\u003e` section.\n    -   Paste the `\u003clink\u003e` tag with `id=\"theme-css\"` within the `\u003chead\u003e` section. It should look something like this with your selected theme:\n\n\n```html\n\u003chtml lang=\"{{ str_replace('_', '-', app()-\u003egetLocale()) }}\"\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"utf-8\"\u003e\n        \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n\n        \u003ctitle inertia\u003e{{ config('app.name', 'LaraReact') }}\u003c/title\u003e\n\n        \u003c!-- Scripts --\u003e\n        @routes\n        @viteReactRefresh\n        @vite(['resources/js/app.jsx', \"resources/js/Pages/{$page['component']}.jsx\"])\n        @inertiaHead\n\n        \u003clink id=\"theme-css\" href={{asset('/themes/lara-light-indigo/theme.css')}} rel=\"stylesheet\"\u003e\u003c/link\u003e\n    \u003c/head\u003e\n    \u003cbody class=\"font-sans antialiased\"\u003e\n        @inertia\n\u003c/body\u003e\u003c/html\u003e\n```\n\n4. Set the Chosen theme inside the `LayoutProvider` within the `layoutcontext` component \n```jsx\n    const [layoutConfig, setLayoutConfig] = useState({\n        ripple: false,\n        inputStyle: 'outlined',\n        menuMode: 'static',\n        colorScheme: 'light',\n        theme: 'tailwind-light',\n        scale: 14\n    });\n```\n\n4. Delete Unwanted Themes:\n\n    -   In the public directory, navigate to the `images/layout/themes` folder.\n    -   Delete the CSS files of the themes you no longer need. This step helps in keeping your project clean and reduces unnecessary file clutter.\n5. Save Changes:\n\n    -   Save the changes to the `app.blade.php` file.\n\nBy following these steps, you have successfully integrated the selected theme into the main layout of your application. Remember to clean up the unwanted themes to maintain a tidy project structure.\n\n**NB: This project is still under development please report any bugs to the issue section of this repo**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboadusamuel%2Flaravel-inertia-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fboadusamuel%2Flaravel-inertia-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboadusamuel%2Flaravel-inertia-react/lists"}