README

A modern UI component library for Laravel 11 applications, built with the TALL stack (Tailwind CSS, Alpine.js, Laravel, Livewire).

Overview

EcolePlus UI provides a comprehensive set of pre-built components that follow Laravel and Tailwind CSS best practices. Built specifically for Laravel 11, it offers:

🎨 Modern, consistent design system
🌙 Dark mode support with proper contrast ratios
♿ WCAG 2.1 compliant components
📱 Mobile-first responsive design
⚡ Alpine.js powered interactions
🔧 Laravel 11 optimized
🎯 TypeScript support
🔍 100% test coverage
📚 Comprehensive documentation

Requirements

PHP 8.2+
Laravel 11.x
Node.js & NPM
Tailwind CSS 3.x
Alpine.js 3.x

Quick Start

Install via Composer:

composer require amsaid/ecoleplus-ui

Publish assets and config:

php artisan vendor:publish --provider="EcolePlus\EcolePlusUi\EcolePlusUiServiceProvider"

Install frontend dependencies:

npm install -D @tailwindcss/forms @tailwindcss/typography alpinejs @alpinejs/focus

Configure Tailwind CSS:

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
    content: [
        './vendor/amsaid/ecoleplus-ui/resources/**/*.blade.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
    ],
    darkMode: 'class',
    theme: {
        extend: {
            colors: {
                primary: colors.blue,
                secondary: colors.gray,
                success: colors.green,
                warning: colors.yellow,
                danger: colors.red,
                info: colors.indigo,
            },
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
}

Import styles:

/* resources/css/app.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import '@vendor/amsaid/ecoleplus-ui/resources/css/components.css';
@import 'tailwindcss/utilities';

Available Components

Form Components

Button - Versatile button component
Input - Text input with validation
Textarea - Multi-line text input
Select - Dropdown select component
Checkbox - Checkbox input with label
Radio - Radio input with label
Toggle - Switch/toggle input with label
File Upload - File upload with drag & drop

Layout Components

Card - Content container
Card Section - Card content organizer

Navigation Components

Breadcrumb - Navigation path indicator
Dropdown - Dropdown menus

Data Display Components

List Group - Versatile list component
Avatar - User avatars
Badge - Labels and counts

Feedback Components

Alert - Status messages
Progress - Progress indicators

Dialog Components

Modal - Dialog windows

Documentation

Configuration

Components can be customized through the config file:

// config/ecoleplus-ui.php
return [
    'theme' => [
        'primary' => [
            'background' => 'bg-primary-600',
            'hover' => 'hover:bg-primary-700',
            'text' => 'text-white',
        ],
        // ...
    ],
    'components' => [
        'button' => [
            'base' => 'inline-flex items-center justify-center...',
            'variants' => [
                'primary' => 'bg-primary-600 text-white...',
                // ...
            ],
        ],
        // ...
    ],
];

Testing

# Run tests
composer test

# Run tests with coverage
composer test-coverage

# Run static analysis
composer analyse

# Format code
composer format

Security

If you discover any security-related issues, please email security@ecoleplus.com instead of using the issue tracker.

Credits

License

The MIT License (MIT). Please see LICENSE.md for more information.

amsaid / ecoleplus-ui

Maintainers

Details