zairakai/laravel-blade-components

Collection of reusable Blade components for forms, layouts, navigation and UI elements with Laravel integration

v1.0.0 2026-03-11 19:33 UTC

Requires

• php: ^8.3
• laravel/framework: ^11.0 || ^12.0

Requires (Dev)

• driftingly/rector-laravel: ^2.1
• ergebnis/composer-normalize: ^2.49
• larastan/larastan: ^3.9
• laravel/pint: ^1.27
• nunomaduro/phpinsights: ^2.13
• orchestra/testbench: ^9.0 || ^10.0
• phpmetrics/phpmetrics: ^2.9
• phpstan/phpstan: ^2.1
• phpunit/phpunit: ^12.0
• rector/rector: ^2.3
• zairakai/laravel-dev-tools: ^1.0

Suggests

• ergebnis/composer-normalize: Automated composer.json normalization

MIT

• Stanislas Poisson

• ui
• components
• Forms
• layout
• laravel
• frontend
• blade
• zairakai

README

62 reusable Blade components for forms, layouts, content, and media — auto-registered with the zk- prefix, with full i18n support for 21 languages.

Features

• 62 components auto-registered as <x-zk-*> — no manual setup required
• Form components (30) — input, select, textarea, checkbox, radio, field, label, button, file, password, switch, and more
• Layout components (16) — container, grid, row, column, section, nav, breadcrumb, pagination, tabs, wrapper, and more
• Content components (6) — heading, paragraph, link, list, blockquote, msr
• Media components (10) — image, video, audio, figure, iframe, canvas, source, track, and more
• Internal cross-component aliases — form.field, form.input, layout.container, etc.
• Publishable assets — views, translations, and config per individual tags
• i18n — 21 supported locales: en, fr, es, de, it, pt, nl, ar, zh, ja, ko, ru, uk, pl, cs, ro, tr, sv, da, fi, no
• Config — password minimum length, select icon configurable without publishing views

Install

composer require zairakai/laravel-blade-components

No service provider registration needed — the package auto-discovers via Laravel's package discovery.

Usage

Form

{{-- Labeled field with input --}}
<x-zk-field label="Email address" :required="true">
    <x-zk-input type="email" name="email" :value="old('email')" />
</x-zk-field>

{{-- Select --}}
<x-zk-select name="role" :options="$roles" />

{{-- Password --}}
<x-zk-password name="password" />

{{-- Submit button --}}
<x-zk-submit>Save changes</x-zk-submit>

Layout

<x-zk-container>
    <x-zk-grid>
        <x-zk-grid-item :span="4">
            <x-zk-aside>Sidebar</x-zk-aside>
        </x-zk-grid-item>
        <x-zk-grid-item :span="8">
            <x-zk-main>Main content</x-zk-main>
        </x-zk-grid-item>
    </x-zk-grid>
</x-zk-container>

{{-- Navigation --}}
<x-zk-nav>
    <x-zk-link :href="route('home')">Home</x-zk-link>
    <x-zk-link :href="route('about')">About</x-zk-link>
</x-zk-nav>

{{-- Breadcrumb --}}
<x-zk-breadcrumb :items="$breadcrumbs" />

{{-- Pagination --}}
<x-zk-pagination :paginator="$users" />

Content

<x-zk-heading level="2">Section title</x-zk-heading>
<x-zk-paragraph>Introductory text.</x-zk-paragraph>
<x-zk-blockquote>A quoted passage.</x-zk-blockquote>

<x-zk-list :items="$features" />

Media

<x-zk-figure>
    <x-zk-image src="/img/photo.jpg" alt="Photo" />
    <x-zk-figcaption>Caption text</x-zk-figcaption>
</x-zk-figure>

<x-zk-video src="/media/clip.mp4" controls />

Config

Publish and customize the package config:

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

config/blade-components.php:

return [
    'password' => [
        'min_characters' => 8,  // minimum password length validation hint
    ],
    'select' => [
        'icon_after' => 'keyboard_arrow_down',  // dropdown icon
    ],
];

Publishing

Customize views, translations, or config individually:

# Blade views (customize any component template)
php artisan vendor:publish --tag=zairakai-components

# Translations (21 locales)
php artisan vendor:publish --tag=zairakai-lang

# Config
php artisan vendor:publish --tag=zairakai-config

# Everything at once
php artisan vendor:publish --tag=zairakai-all

Published views land in resources/views/vendor/zairakai/ and can be freely modified.

Development

make quality        # pint + phpstan + rector + insights + markdownlint + shellcheck
make quality-fast   # pint + phpstan + markdownlint
make test           # phpunit with coverage

Getting Help

Made with ❤️ by Zairakai