Laravel Shadcn Admin Dashboard

A modern, responsive, and accessible admin dashboard built with Shadcn UI, Laravel, and Vite. This project combines the elegance of Shadcn's UI components with the robustness of Laravel's backend framework, providing a seamless development experience.

This project is inspired by Shadcn-admin and adapted to work seamlessly with Laravel and Inertia.js.

Features

• Light/dark mode
• Responsive
• Accessible
• With built-in Sidebar component
• Global Search Command
• 10+ pages
• Extra custom components

Tech Stack

UI: ShadcnUI (TailwindCSS + RadixUI)

Backend: Laravel 12.x

Frontend Integration: InertiaJs

Build Tool: Vite

Type Checking: TypeScript

Linting/Formatting: Eslint & Prettier

Icons: Tabler Icons

Run Locally

1. Clone the project

  git clone [email protected]:binjuhor/shadcn-lar.git

2. Go to the project directory

  cd shadcn-lar

3. Install dependencies

• Install JavaScript dependencies:

  pnpm install

• Install PHP dependencies:

  composer install

• Data migration

  php artisan migrate

4. Start the dev
   Frotnedend and Backend server

• Start the Vite development server:

  pnpm run dev

• Start the Laravel development server:

  php artisan serve

5. Open your browser and visit http://localhost:8000 to view the dashboard.

CI/CD Guide

This project includes automated CI/CD workflows using GitHub Actions. The workflows are located in the .github/workflows/ directory and provide continuous integration and deployment capabilities.

Available Workflows

1. Tests Workflow (test.yml)

Automatically runs on every push to the main branch and performs:

• PHP Setup: Uses PHP 8.2 with required extensions
• Environment Setup: Copies .env.example to .env and generates application key
• Dependencies: Installs Composer dependencies
• Frontend Build: Installs Node.js dependencies and builds production assets
• Database Setup: Creates SQLite database for testing
• Test Execution: Runs PHPUnit/Pest tests (unit and feature tests)

2. Deploy Workflow (deploy.yml)

Automatically deploys to production server on successful pushes to main branch:

• Code Deployment: Uses rsync to sync code to production server
• Frontend Build: Builds production assets before deployment
• Dependencies: Installs/updates Composer dependencies via Docker
• Database Migration: Runs Laravel migrations
• Cache Management: Clears and optimizes application cache
• Docker Integration: Restarts Docker containers for updated services

Required Secrets

For the deployment workflow to work, configure these GitHub repository secrets:

• PRIVATE_KEY - SSH private key for server access
• SSH_HOST - Production server hostname/IP
• SSH_USER - SSH username for server access
• WORK_DIR - Application directory path on server
• DOCKER_DIR - Docker compose directory path on server

Note: Ensure your server is set up to allow SSH access using the provided private key. Public key should be added to the server's ~/.ssh/authorized_keys. Folder permissions should allow the SSH user to read/write as needed..ssh folder should have 700 permissions and authorized_keys file should have 600 permissions.

Local Development Workflow

1. Before Committing:

   # Run tests locally
   php artisan test
   
   # Build frontend assets
   pnpm run build
   
   # Check code formatting
   pnpm run lint
   

2. Push to Main:

   • Tests workflow runs automatically
   • If tests pass and on main branch, deployment begins
   • Monitor workflow progress in GitHub Actions tab

Workflow Customization

To modify the CI/CD behavior:

• Test Configuration: Edit .github/workflows/test.yml
• Deployment Steps: Edit .github/workflows/deploy.yml
• Add Quality Checks: Consider adding code style checks, static analysis, or security scans

Modular Architecture

This project uses nwidart/laravel-modules for a modular monorepo architecture. Each module is self-contained with its own controllers, models, migrations, and React frontend.

Available Modules

Module	Description
Finance	Personal finance tracking (accounts, transactions, budgets)
Invoice	Invoice management
Permission	Roles and permissions management
Settings	Application settings
Blog	Blog posts and categories
Ecommerce	Products, orders, and categories
Notification	User notifications

Module Commands

Create a New Module

# Basic module scaffolding
php artisan module:scaffold ModuleName

# With CRUD scaffolding (model, migration, policy, controller, pages)
php artisan module:scaffold ModuleName --with-crud

# Specify entity name for CRUD
php artisan module:scaffold Inventory --with-crud --entity=Product

# Preview without creating files
php artisan module:scaffold ModuleName --dry-run

Generate a Standalone Site from Modules

Extract selected modules into a completely new Laravel project:

# Create a finance-only site
php artisan site:generate FinanceApp --modules=Finance --output=~/Projects

# Create a multi-module site
php artisan site:generate AdminPanel --modules=Finance,Settings,Permission --output=~/Projects

# Preview what would be created
php artisan site:generate TestApp --modules=Finance --dry-run

The site:generate command:

• Copies base Laravel+React project structure
• Includes only selected modules
• Updates all configuration files (composer.json, tsconfig.json, vite.config.js)
• Removes unused module references
• Shows next steps after generation

Enable/Disable Modules

# Enable a module
php artisan module:enable ModuleName

# Disable a module
php artisan module:disable ModuleName

# List all modules
php artisan module:list

Module Structure

Modules/
└── ModuleName/
    ├── app/
    │   ├── Http/Controllers/
    │   ├── Models/
    │   ├── Policies/
    │   └── Providers/
    ├── config/
    ├── database/
    │   ├── migrations/
    │   └── seeders/
    ├── resources/
    │   └── js/
    │       ├── pages/
    │       └── types/
    ├── routes/
    │   ├── api.php
    │   └── web.php
    └── module.json

Roadmap

Here are some of the planned features for future updates:

• User Permissions & Roles: Manage user roles and permissions with a flexible and intuitive system.

• Profile Manager: Allow users to update their profiles, including personal information and security settings.

• Post & Page Manager: Create and manage dynamic posts and pages with a rich text editor.

• Theme & Plugin Manager: Easily install and manage themes and plugins to extend functionality.

• File & Media Manager: A powerful file and media manager for handling uploads and organizing assets.

Author

This project was crafted with 🤍 by @binjuhor

License

This project is open-source and licensed under the MIT License. Feel free to use, modify, and distribute it as needed.