README

Reusable Laravel components package.

Quick Start (90 Seconds)

Publish package assets:

php artisan vendor:publish --tag=laravel-components-config
php artisan vendor:publish --tag=laravel-components-views
php artisan vendor:publish --tag=laravel-components-assets
php artisan vendor:publish --tag=laravel-components-theme
php artisan vendor:publish --tag=laravel-components-safelist
php artisan vendor:publish --tag=laravel-components-layouts

Setup Tailwind integration automatically:

php artisan laravel-components:setup-tailwind

Build frontend assets:

npm run build

Verify integration:

php artisan laravel-components:doctor

Component Tag

Use namespaced component tags:

<x-comp::input name="email" label="Email" type="email" />

Reusable Utilities

This package also provides reusable services/traits:

Indrahulu\LaravelComponents\Services\ExceptionService
Indrahulu\LaravelComponents\Services\IndexQueryService
Indrahulu\LaravelComponents\Concerns\HasEnumOptions
Indrahulu\LaravelComponents\Concerns\PreservesIndexState

Example service injection:

use Indrahulu\LaravelComponents\Services\IndexQueryService;

public function index(Request $request, IndexQueryService $indexQueryService): View
{
    $rowsPerPage = $indexQueryService->resolveRowsPerPage($request->query('rows'));

    // ...
}

Example enum trait:

use Indrahulu\LaravelComponents\Concerns\HasEnumOptions;

enum UserRole: string
{
    use HasEnumOptions;
}

Example index state trait:

use Indrahulu\LaravelComponents\Concerns\PreservesIndexState;

class UserController extends Controller
{
    use PreservesIndexState;
}

Documentation

Development Guide: GUIDES.md
Docs Index: docs/index.md
Input: docs/components/input.md
Button: docs/components/button.md
Badge: docs/components/badge.md
Card: docs/components/card.md
Checkbox: docs/components/checkbox.md
Link: docs/components/link.md
Modal: docs/components/modal.md
Table Filter: docs/components/table-filter.md
Table Index: docs/components/table-index.md
Textarea: docs/components/textarea.md
Select: docs/components/select.md
Select Remote: docs/components/select-remote.md
Spinner: docs/components/spinner.md
Theme Contract: docs/theming/theme-contract.md
Layout Practical Guide: docs/layouts/default-customization.md
Layout Full Reference: docs/layouts/default-reference.md
Exception Service: docs/utilities/exception-service.md
Index Query Service: docs/utilities/index-query-service.md
Has Enum Options: docs/utilities/has-enum-options.md
Preserves Index State: docs/utilities/preserves-index-state.md

Prerequisites

AlpineJS should be available in host app for interactive components.
Axios should be available globally as window.axios for remote components.
Host app should provide <x-icon> (for example via blade-ui-kit/blade-icons and the icon set used by the project).
IndexQueryService uses Eloquent query builder (illuminate/database).

Theming

Active theme is resolved from config('laravel-components.theme.active').
Theme keys are read from config('laravel-components.themes.{theme}.tokens|components|behavior').
Full schema and host-contract details are documented in docs/theming/theme-contract.md.

Behavior Configuration

IndexQueryService::resolveRowsPerPage() reads:

laravel-components.utilities.index.rows_per_page.options
laravel-components.utilities.index.rows_per_page.default

Example:

'utilities' => [
    'index' => [
        'rows_per_page' => [
            'options' => [10, 25, 50, 100],
            'default' => 25,
        ],
    ],
],

Command Helpers

php artisan laravel-components:setup-tailwind
- Injects required @import and @source lines into host CSS entry file.
php artisan laravel-components:doctor
- Checks config/theme/safelist/app.css integration and reports OK/WARN/FAIL.
php artisan laravel-components:generate-safelist
- Regenerates safelist entries from active theme config.

Agent Skill

Publish skill template:

php artisan vendor:publish --tag=laravel-components-skill

Published file:

docs/vendor/laravel-components/skills/laravel-components-development/SKILL.md

Install to Codex skills directory:

Create target folder: ~/.codex/skills/laravel-components-development
Copy published SKILL.md into that folder.

Skill reference is doc-driven and points to:

docs/index.md
docs/components/*
docs/theming/theme-contract.md
docs/layouts/*
docs/utilities/*
docs/skills/installation.md

Publish Assets

php artisan vendor:publish --tag=laravel-components-config
php artisan vendor:publish --tag=laravel-components-views
php artisan vendor:publish --tag=laravel-components-assets
php artisan vendor:publish --tag=laravel-components-theme
php artisan vendor:publish --tag=laravel-components-safelist
php artisan vendor:publish --tag=laravel-components-layouts
php artisan vendor:publish --tag=laravel-components-skill
php artisan vendor:publish --tag=laravel-components-docs

Starter Layout

Publish starter layout:

php artisan vendor:publish --tag=laravel-components-layouts

Published file:

resources/views/layout/default.blade.php

Then use in pages:

@extends('layout.default')

Customization guides:

docs/layouts/default-customization.md
docs/layouts/default-reference.md

Tailwind Source and Safelist (Host App)

In host app resources/css/app.css:

@import './vendor/laravel-components-theme.css';

@source '../../vendor/indrahulu/laravel-components/resources/views/**/*.blade.php';
@source './safelist/laravel-components.txt';

For local path/submodule usage, point @source to local package views path instead of vendor/....

Troubleshooting

Components render but look unstyled:
- Ensure @import './vendor/laravel-components-theme.css'; exists in resources/css/app.css.
- Ensure @source lines for package views and safelist exist in resources/css/app.css.
- Ensure published files exist:
  - resources/css/vendor/laravel-components-theme.css
  - resources/css/safelist/laravel-components.txt
- Re-run npm run build (or npm run dev for local development).
- Run php artisan laravel-components:doctor and follow warnings.

indrahulu / laravel-components

Maintainers

Package info

Statistics

Security