moonbaselabs/blade-components

A set of themeable components built with Tailwind CSS and AlpineJS for use with Laravel Blade.

v0.0.14 2023-06-13 15:36 UTC

Requires

• php: ^8.0
• illuminate/support: ^8.0|^9.0|^10.0
• illuminate/view: ^8.0|^9.0|^10.0

MIT

• Christian Taylor

• ui
• laravel
• blade
• tailwind
• alpinejs

README

A set of themeable components built with Tailwind CSS and AlpineJS for use with Laravel Blade.

This project is still in Beta some APIs might change.

Installation

composer require moonbaselabs/blade-components

Setup Through Artisan

This command will overwrite asset files. It's best to run this in a fresh Laravel project after optionally installing Laravel Breeze. If you are installing this package in an existing project use the Manual Setup steps below.

php artisan blade-components:install

Setup Manually

Publish the components configuration file:

php artisan vendor:publish --tag=blade-components

Add the configuration file to the purge array in your Tailwind config:

// tailwind.config.js

purge: [
    './config/blade-components.php'
],

Include the AlpineJS components in your JavaScript before loading AplineJS

// resources/js/app.js

import './blade-components'
import Alpine from 'alpinejs'

window.Alpine = Alpine

Alpine.start()

Your're all set! You may customize your component themes in config/blade-components.php.

Components

• Badge
• Button
• Checkbox
• Description
• Error
• Field
• Form
• Input
• Label
• Legend
• Menu
• Menu Item
• Radio
• Select
• Textarea

Badge

Renders a colored badge. Use the theme attribute to customize the look and feel:

<x-badge theme="indigo">Badge</x-badge>

Output:

<span class="...">Badge</span>

Button

Renders a form button:

<x-button>Button</x-button>

Output:

<button class="...">Button</x-button>

When the href attribute is set this component will render as a link:

<x-button href="https://moonbaselabs.com">More Info</x-button>

Output:

<a href="https://moonbaselabs.com" class="...">More Info</a>

Checkbox

Renders a form checkbox:

<x-checkbox name="remember_me" />

Output:

<input type="checkbox" name="remember_me" id="remember_me" class="..." />

Checkboxes will maintain their checked value after validation errors. If this field contains an error it's class attribute be set to the CSS classes specified for the invalid key in your config file.

Description

Renders a form field description text to be used along with a label:

<x-description for="password">Must be at least 8 characters.</x-description>
<x-description for="password" value="Must be at least 8 characters." />

Output:

<div id="password_description" class="...">Must be at least 8 characters.</div>
<div id="password_description" class="...">Must be at least 8 characters.</div>

To make form fields accessible you should add aria-describedby="FIELD_NAME_description to corresponding form elements, exp: <input type="password" aria-describedby="password_description">

Error

Renders an error message when a field fails server-side validation:

<x-error for="password" />

Output:

<!-- When password is invalid -->
<div id="password_error" class="...">The password field is required.</div>

You may override server-side validation messages using the value attribute or setting text content:

<x-error for="password" value="That's a bad password" />
<x-error for="password">That's a bad password</x-error>

Use the bag attribute to pull errors from a specific error bag:

<x-error for="password" bag="login" />

Field

Renders a simple container for grouped form elements:

<x-field>
    <x-label ...>
    <x-description ...>
    <x-error ...>
    <x-input ...>
</x-field>

Output:

<div class="...">
    <label ...>
    <div ...>
    <div ...>
    <input ...>
</div>

Form

Renders a form element with appropriate method and CSRF directives:

<x-form action="https://moonbaselabs.com">
    ...
</x-form>

Output:

<form method="post" action="https://moonbaselabs.com">
    <input type="hidden" name="_token" value="...">
    <input type="hidden" name="_method" value="post">
    ...
</form>

Add the has-files attribute to support file uploads:

<x-form has-files method="put" action="https://moonbaselabs.com">
    ...
</x-form>

Output:

<x-form method="put" action="https://moonbaselabs.com" enctype="multipart/form-data">
    <input type="hidden" name="_token" value="...">
    <input type="hidden" name="_method" value="put">
    ...
</x-form>

Input

Documentation coming soon.

Label

Documentation coming soon.

Legend

Documentation coming soon.

Menu

Documentation coming soon.

Menu Item

Documentation coming soon.

Radio

Documentation coming soon.

Select

Documentation coming soon.

Textarea

Documentation coming soon.