accelade/schemas

Schema layout components for Accelade - organize forms with sections, tabs, grids, wizards and more

v1.0.0 2026-01-18 13:37 UTC

Requires

• php: ^8.2
• accelade/accelade: ^1.0.0
• illuminate/support: ^11.0|^12.0
• illuminate/view: ^11.0|^12.0

Requires (Dev)

• laravel/pint: ^1.18
• orchestra/testbench: ^9.0|^10.0
• pestphp/pest: ^3.0
• pestphp/pest-plugin-laravel: ^3.0

MIT

• Fady Mondy

• wizard
• Forms
• layout
• grid
• laravel
• tabs
• blade
• section
• schemas
• accelade

README

Layout Components for Laravel Blade.

Schema components for organizing forms, content, and data displays in your Laravel applications. Built on top of Accelade for reactive interactivity.

<x-accelade::section heading="User Profile" collapsible>
    <x-accelade::grid :columns="2">
        <input name="first_name" placeholder="First Name">
        <input name="last_name" placeholder="Last Name">
    </x-accelade::grid>
</x-accelade::section>

That's it. Collapsible sections, tabs, grids, wizards, and more. All with reactive state management.

Features

• Section — Collapsible panels with headings, descriptions, and icons
• Tabs — Horizontal/vertical tabs with badges and persistence
• Grid — Responsive multi-column layouts
• Columns — Simple equal-width columns
• Split — Two-column layouts with configurable ratios
• Fieldset — HTML fieldset with legend
• Wizard — Multi-step form flows
• Placeholder — Static content, views, or HTML

Installation

composer require accelade/schemas

The package extends Accelade's component namespace, so all components are available as <x-accelade::*>.

Quick Start

Section

<x-accelade::section
    heading="Personal Information"
    description="Update your profile details"
    collapsible
>
    <input name="name" placeholder="Full Name">
    <input name="email" placeholder="Email">
</x-accelade::section>

Tabs

<x-accelade::tabs :component="$tabs" />

use Accelade\Schemas\Components\Tabs;
use Accelade\Schemas\Components\Tab;

$tabs = Tabs::make()
    ->tabs([
        Tab::make('General')
            ->icon('<svg>...</svg>')
            ->schema([...]),
        Tab::make('Advanced')
            ->badge('3')
            ->schema([...]),
    ]);

Grid

<x-accelade::grid :columns="3" gap="6">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</x-accelade::grid>

Wizard

<x-accelade::wizard :component="$wizard" />

use Accelade\Schemas\Components\Wizard;
use Accelade\Schemas\Components\Step;

$wizard = Wizard::make()
    ->steps([
        Step::make('Account')
            ->icon('<svg>...</svg>')
            ->schema([...]),
        Step::make('Profile')
            ->schema([...]),
        Step::make('Review')
            ->schema([...]),
    ])
    ->nextLabel('Continue')
    ->submitLabel('Create Account');

Split Layout

<x-accelade::split ratio="1/3">
    <x-slot:start>
        <nav>Sidebar</nav>
    </x-slot:start>
    <x-slot:end>
        <main>Content</main>
    </x-slot:end>
</x-accelade::split>

Fieldset

<x-accelade::fieldset legend="Contact Info" :columns="2">
    <input name="phone" placeholder="Phone">
    <input name="address" placeholder="Address">
</x-accelade::fieldset>

Placeholder

<x-accelade::placeholder
    :view="'partials.terms'"
    label="Terms of Service"
/>

Responsive Columns

All grid-based components support responsive column configurations:

// Simple: 2 columns
Grid::make(2);

// Responsive: 1 on mobile, 2 on sm, 3 on lg
Grid::make(['default' => 1, 'sm' => 2, 'lg' => 3]);

<x-accelade::grid :columns="['default' => 1, 'sm' => 2, 'lg' => 3]">
    ...
</x-accelade::grid>

Multi-Framework Support

Components automatically use the correct framework prefix for Accelade's reactivity:

Framework	Directives
Vanilla JS	a-show, a-class, @click
Vue	v-show, v-class, @click
React	data-state-show, data-state-class, @click
Svelte	s-show, s-class, @click
Angular	ng-show, ng-class, @click

Object-Based API

All components support a fluent PHP API for programmatic rendering:

use Accelade\Schemas\Components\Section;
use Accelade\Schemas\Components\Grid;
use Accelade\Schemas\Components\Tabs;
use Accelade\Schemas\Components\Tab;

$section = Section::make('settings')
    ->heading('Application Settings')
    ->description('Configure your app')
    ->icon('<svg>...</svg>')
    ->collapsible()
    ->collapsed()
    ->columns(2)
    ->schema([
        Grid::make(2)->schema([...]),
    ]);

// In Blade:
{!! $section->render() !!}

Requirements

• PHP 8.2+
• Laravel 11.x or 12.x
• Accelade 0.2+

Documentation

Component	Description
Section	Collapsible sections with headings
Tabs	Tabbed content panels
Grid	Responsive grid layouts
Wizard	Multi-step form wizard
Fieldset	Group fields with legend
Split	Two-column layouts
Columns	Equal-width columns
Placeholder	Static content display

License

MIT License. See LICENSE for details.