PHPackages                             mhshagor/laravel-components - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. mhshagor/laravel-components

ActiveLibrary[Utility & Helpers](/categories/utility)

mhshagor/laravel-components
===========================

Laravel Components - Beautiful components for Laravel

1.1.3(1mo ago)035MITJavaScript

Since May 11Pushed 1mo agoCompare

[ Source](https://github.com/mhshagor/laravel-components)[ Packagist](https://packagist.org/packages/mhshagor/laravel-components)[ RSS](/packages/mhshagor-laravel-components/feed)WikiDiscussions main Synced 3w ago

READMEChangelogDependencies (3)Versions (7)Used By (0)

MHShagor Laravel Components
===========================

[](#mhshagor-laravel-components)

A comprehensive Laravel component library that provides reusable Blade UI components including forms, modals, tables, toggles, file picker, and shared CSS/JS assets with demo templates.

This package is designed to be published into your application's `resources/` folder, allowing you to **customize Blade views, JavaScript, and CSS** according to your specific needs.

Features
--------

[](#features)

- **Modern UI Components**: Pre-built form inputs, modals, tables, and interactive elements
- **Date & Time Pickers**: Integrated Flatpickr-based date/time selection components
- **File Picker**: Advanced file upload component with preview capabilities
- **Modal System**: Ready-to-use modal dialogs for add, edit, and delete operations
- **Dynamic Tables**: Tables with add/remove row functionality
- **Responsive Design**: Mobile-friendly components with Tailwind CSS
- **Fully Customizable**: All assets are publishable and modifiable
- **Performance Optimized**: Minimal JavaScript with efficient event handling

Requirements
------------

[](#requirements)

- **PHP**: `^8.0`
- **Laravel**: Compatible with modern Laravel versions (8.x, 9.x, 10.x, 11.x)
- **Node.js**: Required for asset compilation (if using Vite/Laravel Mix)

Installation
------------

[](#installation)

Install the package via Composer:

```
composer require mhshagor/laravel-components
```

Laravel's package auto-discovery will register the service provider automatically.

Quick Start
-----------

[](#quick-start)

### 1. Publish Assets

[](#1-publish-assets)

Publish all components and assets in one command:

```
php artisan mhshagor:publish-all
```

Or publish specific components:

```
# Publish only components
php artisan vendor:publish --tag=components

# Publish only file picker
php artisan vendor:publish --tag=file-picker
```

### 2. Include Assets

[](#2-include-assets)

Add the CSS and JavaScript to your application:

```
// resources/js/app.js
import "./vendor/components/components.js";
import "./vendor/components/date-time-picker.js";
```

```
/* resources/css/app.css */
@import "./vendor/components/components.css";
@import "./vendor/components/date-time-picker.css";
```

### 3. Compile Assets

[](#3-compile-assets)

```
npm run build
# or
npm run dev
```

Component Catalog
-----------------

[](#component-catalog)

### Form Components

[](#form-components)

#### Basic Form Wrapper

[](#basic-form-wrapper)

```

```

#### Input Fields

[](#input-fields)

```

```

#### Labeled Input Components

[](#labeled-input-components)

```

```

#### Buttons

[](#buttons)

```
Submit Form
Action
```

### Modal Components

[](#modal-components)

#### Base Modal

[](#base-modal)

```

        Modal Title
        Modal content goes here.

            Close

```

#### Specialized Modals

[](#specialized-modals)

```

```

### Table Components

[](#table-components)

#### Dynamic Table

[](#dynamic-table)

```

                    Remove

    Add Row

```

### Style Components

[](#style-components)

#### Card Component

[](#card-component)

```

    Card Title
    Card content goes here.

```

#### Accordion Component

[](#accordion-component)

```

            Section 1

            Content for section 1...

            Section 2

            Content for section 2...

```

### Toggle Component

[](#toggle-component)

```

```

### File Picker Component

[](#file-picker-component)

```

```

Published File Structure
------------------------

[](#published-file-structure)

After publishing, your resources directory will include:

```
resources/
├── views/
│   ├── components/
│   │   └── sgd/
│   │       ├── form/
│   │       ├── style/
│   │       ├── table/
│   │       ├── modal.blade.php
│   │       ├── modal-add.blade.php
│   │       ├── modal-edit.blade.php
│   │       ├── modal-delete.blade.php
│   │       └── toggle.blade.php
│   └── sgd/
│       ├── accordion.html
│       ├── dynamic-table.html
│       └── file-picker.html
├── js/
│   └── vendor/
│       └── components/
│           ├── components.js
│           └── date-time-picker.js
└── css/
    └── vendor/
        └── components/
            ├── components.css
            └── date-time-picker.css

```

JavaScript Features
-------------------

[](#javascript-features)

### Dynamic Table Operations

[](#dynamic-table-operations)

- **Add Rows**: Click elements with `.addRow` class
- **Delete Rows**: Click elements with `.deleteRow` class
- **Auto-reindexing**: Form input names are automatically reindexed when rows are added/removed

### Accordion Functionality

[](#accordion-functionality)

- **Single Open**: Only one accordion item can be open at a time
- **Custom Colors**: Set color using `data-color` attribute
- **Default State**: Use `data-default="true"` to set initial open state

### Date/Time Pickers

[](#datetime-pickers)

The package includes Flatpickr integration for various date/time input types:

- **Date Picker**: `.datePicker`
- **Time Picker**: `.timePicker`
- **DateTime Picker**: `.dateTimePicker`
- **Date Range**: `.dateRange`
- **Time Range**: `.timeRange`

### Modal Management

[](#modal-management)

JavaScript functions for modal control:

```
// Open modal
openModal("modal-id");

// Close modal
closeModal("modal-id");
```

CSS Classes
-----------

[](#css-classes)

### Form Styling

[](#form-styling)

- `.base-input`: Base styling for all input elements
- `.base-button`: Base styling for buttons
- Error states are automatically handled with `.text-red-500`

### Modal Styling

[](#modal-styling)

- `.modal-backdrop`: Semi-transparent backdrop
- `.modal-panel`: Modal content container with transitions

### Table Styling

[](#table-styling)

- `.dynamicTable`: Container for dynamic tables
- `.cloneRow`: Row template for cloning
- `.appendClone`: Container for cloned rows
- `.counter`: Row number display

Customization
-------------

[](#customization)

### Modifying Components

[](#modifying-components)

All published components can be customized:

1. **Blade Views**: Edit files in `resources/views/components/sgd/`
2. **JavaScript**: Modify `resources/js/vendor/components/`
3. **CSS**: Update styles in `resources/css/vendor/components/`

### Adding New Components

[](#adding-new-components)

1. Create new Blade component in the appropriate folder
2. Add JavaScript functionality to `components.js`
3. Include CSS classes in `components.css`

Demos
-----

[](#demos)

The package includes demo templates accessible after publishing:

- **Accordion Demo**: `resources/views/sgd/accordion.html`
- **Dynamic Table Demo**: `resources/views/sgd/dynamic-table.html`
- **File Picker Demo**: Available via file-picker package

Troubleshooting
---------------

[](#troubleshooting)

### Common Issues

[](#common-issues)

1. **Date pickers not working**

    - Ensure Flatpickr library is loaded
    - Check browser console for JavaScript errors
    - Verify CSS classes are correctly applied
2. **Modal not opening**

    - Check if modal ID matches the trigger
    - Ensure JavaScript is properly loaded
    - Verify modal elements exist in DOM
3. **Dynamic table issues**

    - Ensure `.addRow` and `.deleteRow` classes are present
    - Check for JavaScript errors in browser console
    - Verify table structure matches expected format

### Browser Compatibility

[](#browser-compatibility)

- **Modern Browsers**: Full support (Chrome, Firefox, Safari, Edge)
- **IE11**: Limited support (some features may not work)
- **Mobile**: Responsive design tested on iOS and Android

Contributing
------------

[](#contributing)

We welcome contributions! Please follow these steps:

1. **Fork** the repository
2. **Create** a feature branch (`git checkout -b feature/amazing-feature`)
3. **Commit** your changes (`git commit -m 'Add amazing feature'`)
4. **Push** to the branch (`git push origin feature/amazing-feature`)
5. **Open** a Pull Request

### Development Setup

[](#development-setup)

```
# Clone the repository
git clone https://github.com/mhshagor/laravel-components.git

# Install dependencies
composer install
npm install

# Run tests
npm test
```

Version History
---------------

[](#version-history)

### v1.0.9

[](#v109)

- Fixed CSRF protection for all HTTP methods
- Improved language helper with fallback values
- Added Flatpickr availability check
- Fixed CSS comment syntax issues
- Enhanced error handling and logging

### Previous Versions

[](#previous-versions)

- See Git commit history for detailed changes

License
-------

[](#license)

This package is open-sourced software licensed under the **MIT license**.

Support
-------

[](#support)

For support, please contact:

- **Email**:
- **GitHub Issues**: [Create an issue](https://github.com/mhshagor/laravel-components/issues)

Credits
-------

[](#credits)

- **Author**: M.H SHAGOR
- **Dependencies**:
    - Flatpickr (Date/Time Picker)
    - Tailwind CSS (Styling)
    - Alpine.js (Interactivity)

---

**Thank you for using MHShagor Laravel Components!**

###  Health Score

38

—

LowBetter than 83% of packages

Maintenance90

Actively maintained with recent releases

Popularity9

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity38

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~13 days

Total

6

Last Release

46d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/f05fb5abd6bed8957b859b34367755f7ff56c2b81393bf0f8aa59b2e325b0ab2?d=identicon)[mhshagor](/maintainers/mhshagor)

---

Top Contributors

[![mhshagor](https://avatars.githubusercontent.com/u/75138610?v=4)](https://github.com/mhshagor "mhshagor (62 commits)")

---

Tags

laravelcomponents

### Embed Badge

![Health badge](/badges/mhshagor-laravel-components/health.svg)

```
[![Health](https://phpackages.com/badges/mhshagor-laravel-components/health.svg)](https://phpackages.com/packages/mhshagor-laravel-components)
```

###  Alternatives

[livewire/flux

The official UI component library for Livewire.

9476.8M121](/packages/livewire-flux)[okipa/laravel-form-components

Ready-to-use and customizable form components.

198.0k1](/packages/okipa-laravel-form-components)[ympact/flux-icons

A package to provide icons from different vendors for Livewire Flux.

118.7k](/packages/ympact-flux-icons)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)