harlew-com/laravel-sleek

React-style component syntax for Laravel Blade

v0.0.2 2025-10-01 23:02 UTC

Requires

• php: ^8.1
• illuminate/contracts: ^10.0||^11.0||^12.0
• spatie/laravel-package-tools: ^1.16

Requires (Dev)

• laravel/pint: ^1.14
• orchestra/testbench: ^8.0||^9.0||^10.0
• pestphp/pest: ^2.34
• pestphp/pest-plugin-laravel: ^2.3

MIT

• Harrison

• components
• view
• laravel
• compiler
• react
• blade

README

React-style component syntax for Laravel Blade templates.

Overview

Laravel Sleek transforms PascalCase component tags into Laravel's native x-component syntax, allowing you to write Blade components with a React-like syntax.

<!-- Write this -->
<Button type="primary" />
<Form.Input name="email" />

<!-- Get this -->
<x-button type="primary" />
<x-form.input name="email" />

Installation

Install via Composer:

composer require harlew-com/laravel-sleek

The package will automatically register itself via Laravel's package discovery.

Configuration (Optional)

Publish the configuration file:

php artisan vendor:publish --tag=sleek-config

This creates config/sleek.php where you can:

• Enable/disable the compiler
• Add custom HTML tags to ignore

return [
    'enabled' => true,

    'ignore_tags' => [
        // Standard HTML tags are already included
        // Add custom tags here if needed
    ],
];

Usage

Basic Components

Write PascalCase component names that automatically transform to kebab-case:

<Button />              → <x-button />
<UserProfile />         → <x-user-profile />
<NavigationMenu />      → <x-navigation-menu />

Nested Components (Dot Notation)

Use dot notation for namespaced components:

<Form.Input />          → <x-form.input />
<Layout.Header />       → <x-layout.header />
<Card.Title />          → <x-card.title />

Alternative: Subfolder Components Without Dot Notation

If you prefer subfolders without dot notation (e.g., <FormInput /> instead of <Form.Input />), register component aliases in your AppServiceProvider:

use Illuminate\Support\Facades\Blade;

public function boot()
{
    Blade::component('components.forms.input', 'FormInput');
}

Then use:

<FormInput />           → Uses components/forms/input.blade.php

With Attributes

All attributes are preserved:

<Button type="submit" class="btn-primary" @click="submit">
    Submit Form
</Button>

<!-- Transforms to -->
<x-button type="submit" class="btn-primary" @click="submit">
    Submit Form
</x-button>

Self-Closing Tags

Both syntaxes work:

<Avatar src="/user.jpg" />
<Avatar src="/user.jpg"/>

How It Works

Laravel Sleek registers a Blade precompiler that runs before standard Blade compilation. It:

1. Identifies PascalCase HTML tags
2. Converts them to kebab-case with x- prefix
3. Preserves all attributes and content
4. Ignores standard HTML tags

The transformation happens at compile time, so there's no runtime performance impact.

Requirements

• PHP 8.1 or higher
• Laravel 10.0 or 11.0

License

The MIT License (MIT). Please see License File for more information.

Credits

• Harrison

Support

For issues, questions, or contributions, please visit the GitHub repository.