PHPackages                             litepie/layout - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Authentication & Authorization](/categories/authentication)
4. /
5. litepie/layout

ActiveLibrary[Authentication & Authorization](/categories/authentication)

litepie/layout
==============

A flexible, component-based layout organizer for Laravel with infinite composition of different section types

v1.0.11(4mo ago)017MITPHPPHP ^8.2CI passing

Since Dec 11Pushed 2mo agoCompare

[ Source](https://github.com/Litepie/Layout)[ Packagist](https://packagist.org/packages/litepie/layout)[ Docs](https://github.com/Litepie/Layout)[ RSS](/packages/litepie-layout/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (9)Versions (12)Used By (0)

Litepie Layout Builder
======================

[](#litepie-layout-builder)

A powerful and flexible Laravel package for building dynamic, data-driven layouts with support for nested sections, components, authorization, caching, and responsive behavior.

Table of Contents
-----------------

[](#table-of-contents)

- [Overview](#overview)
- [Installation](#installation)
- [Quick Start](#quick-start)
- [Core Concepts](#core-concepts)
- [Architecture](#architecture)
- [Features](#features)
- [Documentation](#documentation)
- [License](#license)

Overview
--------

[](#overview)

Litepie Layout Builder provides a fluent, declarative API for creating complex UI layouts in Laravel applications. It separates layout structure from presentation logic, making it easy to build reusable, maintainable, and testable UI components.

### Key Features

[](#key-features)

- **Declarative Layout API** - Build layouts using a fluent, chainable interface
- **Sections & Components** - Clear separation between containers (Sections) and content (Components)
- **Named Section Slots** - Organize content in header, body, footer, and custom slots
- **Authorization** - Built-in permission and role-based access control
- **Data Binding** - Automatic data loading from multiple sources (API, database, closures)
- **Responsive Design** - Device-specific layout configurations
- **Caching** - Performance optimization with flexible cache strategies
- **Events** - Lifecycle hooks for before/after rendering
- **Validation** - Input validation with Laravel validator integration
- **Internationalization** - Multi-language support with automatic translation
- **Export/Import** - JSON serialization for layout persistence

Installation
------------

[](#installation)

### Requirements

[](#requirements)

- PHP 8.1 or higher
- Laravel 10.x or 11.x

### Install via Composer

[](#install-via-composer)

```
composer require litepie/layout
```

### Publish Configuration (Optional)

[](#publish-configuration-optional)

```
php artisan vendor:publish --provider="Litepie\Layout\LayoutServiceProvider"
```

This creates `config/layout.php` where you can customize default behavior.

Quick Start
-----------

[](#quick-start)

### Basic Example

[](#basic-example)

```
use Litepie\Layout\Facades\Layout;

// Create a simple card layout
$layout = Layout::create('dashboard')
    ->section('main', function ($section) {
        $section->card('user-stats')
            ->title('User Statistics')
            ->dataUrl('/api/stats')
            ->addField('total_users', 'Total Users')
            ->addField('active_users', 'Active Today')
            ->addField('new_registrations', 'New This Month');
    });

// Render using the layout response macro (recommended)
return response()->layout($layout->cache(true, 3600));

// Or render to array manually
return response()->json($layout->render());
```

### Creating a Form

[](#creating-a-form)

```
use Litepie\Layout\Facades\Layout;

$layout = Layout::create('user-form')
    ->section('main', function ($section) {
        $section->form('user-form')
            ->action('/users')
            ->method('POST')
            ->addField('name', 'text', 'Full Name')
            ->addField('email', 'email', 'Email Address')
            ->addField('role', 'select', 'Role', ['options' => ['admin', 'user', 'guest']])
            ->addButton('submit', 'Save User', 'primary');
    });

return $layout->render();
```

### Multi-Section Layout

[](#multi-section-layout)

```
use Litepie\Layout\Facades\Layout;

$layout = Layout::create('dashboard')
    ->section('header', function ($section) {
        $section->breadcrumb('navigation')
            ->addItem('Home', '/')
            ->addItem('Dashboard', '/dashboard');
    })
    ->section('main', function ($section) {
        // Grid layout with multiple cards
        $section->grid('stats-grid')
            ->columns(3)
            ->addComponent(
                $section->card('revenue')
                    ->title('Revenue')
                    ->dataUrl('/api/revenue')
            )
            ->addComponent(
                $section->card('orders')
                    ->title('Orders')
                    ->dataUrl('/api/orders')
            )
            ->addComponent(
                $section->card('customers')
                    ->title('Customers')
                    ->dataUrl('/api/customers')
            );
    })
    ->section('footer', function ($section) {
        $section->text('copyright')
            ->content('© 2025 Your Company');
    });

return $layout->render();
```

Core Concepts
-------------

[](#core-concepts)

### Sections vs Components

[](#sections-vs-components)

The layout system has two fundamental building blocks:

#### **Sections** (Containers)

[](#sections-containers)

Sections are containers that organize other elements using named slots (header, body, footer, sidebar, etc.). They define structure but don't render content themselves.

**Available Sections:**

- `HeaderSection` - Page headers with navigation
- `LayoutSection` - Main layout containers
- `GridSection` - Responsive grid layouts
- `TabsSection` - Tabbed interfaces
- `AccordionSection` - Collapsible panels
- `WizardSection` - Multi-step workflows
- `ScrollSpySection` - Scroll-based navigation

#### **Components** (Content)

[](#components-content)

Components are leaf nodes that render actual content. They cannot contain other elements.

**Available Components:**

- `FormComponent` - Forms with fields and validation
- `CardComponent` - Content cards
- `TableComponent` - Data tables with sorting/filtering
- `ListComponent` - Lists (ordered, unordered, definitions)
- `AlertComponent` - Notifications and messages
- `BadgeComponent` - Labels and tags
- `ModalComponent` - Dialogs and popups
- `ChartComponent` - Data visualizations
- `TextComponent` - Rich text content
- `CodeComponent` - Syntax-highlighted code blocks
- `MediaComponent` - Images, videos, galleries
- `StatsComponent` - Statistics displays
- `TimelineComponent` - Event timelines
- `CommentComponent` - Comment threads
- `BreadcrumbComponent` - Navigation breadcrumbs
- `DocumentComponent` - Document management
- `CustomComponent` - Custom HTML/JSON content

### Section Slots

[](#section-slots)

Sections organize content using named slots:

```
$layout->section('main', function ($section) {
    // Add to 'header' slot
    $section->section('header')->text('title')->content('Dashboard');

    // Add to 'body' slot (default)
    $section->card('main-content')->title('Content');

    // Add to 'footer' slot
    $section->section('footer')->text('info')->content('Last updated: Today');
});
```

### Nesting Rules

[](#nesting-rules)

- ✅ **Sections can contain Sections** - Create nested layouts
- ✅ **Sections can contain Components** - Add content to containers
- ❌ **Components cannot contain anything** - They are leaf nodes

Architecture
------------

[](#architecture)

### High-Level Structure

[](#high-level-structure)

```
Layout (Root Container)
├── Section (e.g., "header")
│   ├── Component (e.g., Breadcrumb)
│   └── Component (e.g., Alert)
├── Section (e.g., "main")
│   ├── Section (e.g., Grid)
│   │   ├── Component (e.g., Card)
│   │   ├── Component (e.g., Table)
│   │   └── Component (e.g., Chart)
│   └── Section (e.g., Tabs)
│       ├── Tab 1 → Component (Form)
│       └── Tab 2 → Component (List)
└── Section (e.g., "footer")
    └── Component (e.g., Text)

```

### Class Hierarchy

[](#class-hierarchy)

```
BaseSection (Container with slots)
├── HeaderSection
├── LayoutSection
├── GridSection
├── TabsSection
├── AccordionSection
├── WizardSection
└── ScrollSpySection

BaseComponent (Content leaf node)
├── FormComponent
├── CardComponent
├── TableComponent
├── ListComponent
├── AlertComponent
├── BadgeComponent
├── ModalComponent
├── ChartComponent
├── TextComponent
├── MediaComponent
├── StatsComponent
├── TimelineComponent
├── CommentComponent
├── BreadcrumbComponent
├── DocumentComponent
├── AvatarComponent
├── DividerComponent
└── CustomComponent (extensible for custom components)

```

Features
--------

[](#features)

### 1. Data Binding

[](#1-data-binding)

Load data from multiple sources:

```
// From API endpoint
$section->card('api-data')
    ->dataUrl('/api/stats')
    ->dataParams(['filter' => 'active']);

// From database
$section->table('users')
    ->dataSource('users')
    ->dataTransform(function ($query) {
        return $query->where('active', true)->orderBy('created_at', 'desc');
    });

// From closure
$section->card('dynamic')
    ->dataSource(function () {
        return [
            'total' => User::count(),
            'active' => User::where('active', true)->count(),
        ];
    });
```

### 2. Authorization

[](#2-authorization)

Control visibility with permissions and roles:

```
$section->card('admin-panel')
    ->permissions(['manage-users', 'view-logs'])
    ->canSee(function ($user) {
        return $user->isAdmin();
    });

// Resolve authorization for current user
$layout->resolveAuthorization(auth()->user());
```

### 3. Responsive Design

[](#3-responsive-design)

Device-specific configurations:

```
$section->grid('responsive-grid')
    ->columns(4)
    ->setDeviceConfig('mobile', ['columns' => 1])
    ->setDeviceConfig('tablet', ['columns' => 2]);
```

### 4. Caching

[](#4-caching)

Improve performance with automatic caching:

```
$layout->cache()
    ->ttl(3600)
    ->key('dashboard-layout')
    ->tags(['layouts', 'dashboard']);
```

### 5. Events

[](#5-events)

Hook into the rendering lifecycle:

```
$layout->beforeRender(function ($layout) {
    Log::info('Rendering layout: ' . $layout->getName());
});

$layout->afterRender(function ($layout, $output) {
    Log::info('Rendered layout with ' . count($output) . ' sections');
});
```

### 6. Conditional Logic

[](#6-conditional-logic)

Show/hide elements based on conditions:

```
$section->card('premium-features')
    ->condition('user.subscription.status == "active"')
    ->condition('user.subscription.plan == "premium"');
```

### 7. Validation

[](#7-validation)

Validate form inputs:

```
$section->form('user-form')
    ->validationRules([
        'name' => 'required|min:3|max:255',
        'email' => 'required|email|unique:users',
        'age' => 'required|integer|min:18',
    ]);
```

### 8. Internationalization

[](#8-internationalization)

Multi-language support:

```
$section->card('welcome')
    ->title('layout.welcome.title')  // Translatable key
    ->translate();  // Enable translation

// Or translate specific fields
$section->form('contact')
    ->translateField('submit_button', 'forms.submit');
```

Documentation
-------------

[](#documentation)

### Backend (PHP/Laravel)

[](#backend-phplaravel)

- **[Architecture Guide](ARCHITECTURE.md)** - Detailed architecture and design patterns
- **[API Reference](API_REFERENCE.md)** - Complete API documentation for all sections and components
- **[Examples](EXAMPLES.md)** - Comprehensive usage examples and patterns
- **[Custom Components Guide](docs/CUSTOM_COMPONENTS.md)** - Create project-specific components
- **[Complete Guide](docs/GUIDE.md)** - Comprehensive documentation

### Frontend Implementations

[](#frontend-implementations)

- **[Frontend Overview](frontend/README.md)** - Overview of all frontend implementations
- **[React/Next.js](frontend/react-next/README.md)** - ✅ Complete TypeScript implementation with Tailwind CSS
- **[Vue.js](frontend/vue/README.md)** - 📋 Planned implementation
- **[Flutter](frontend/flutter/README.md)** - 📋 Planned implementation

### Code Examples (PHP)

[](#code-examples-php)

- **[Basic Usage](examples/usage.php)** - Simple layout examples
- **[Dashboard Example](examples/DashboardExample.php)** - Complete dashboard with stats and charts
- **[Avatar Component](examples/AvatarExample.php)** - User avatar display examples
- **[Divider Component](examples/DividerExample.php)** - Visual separator examples
- **[Custom Components](examples/CustomComponentExample.php)** - Creating custom components

Testing
-------

[](#testing)

Run the test suite:

```
composer test
```

Run with coverage:

```
composer test:coverage
```

Contributing
------------

[](#contributing)

Contributions are welcome! Please feel free to submit a Pull Request.

Security
--------

[](#security)

If you discover any security-related issues, please email  instead of using the issue tracker.

License
-------

[](#license)

The MIT License (MIT). Please see [LICENSE](LICENSE) for more information.

Credits
-------

[](#credits)

- **Litepie Team**
- [All Contributors](../../contributors)

Support
-------

[](#support)

- **Documentation:**
- **Issues:** [GitHub Issues](https://github.com/Litepie/Layout/issues)
- **Email:**

###  Health Score

39

—

LowBetter than 86% of packages

Maintenance80

Actively maintained with recent releases

Popularity7

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity54

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~3 days

Total

11

Last Release

129d ago

PHP version history (2 changes)v1.0.1PHP ^8.1

v1.0.2PHP ^8.2

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/1788735?v=4)[Renfos Technologies](/maintainers/Renfos)[@Renfos](https://github.com/Renfos)

---

Top Contributors

[![georgemjohn](https://avatars.githubusercontent.com/u/7950080?v=4)](https://github.com/georgemjohn "georgemjohn (27 commits)")

---

Tags

laravelcomponentsgridauthorizationstructurelayoutformFlexiblesectionscompositionnestinglitepie

###  Code Quality

TestsPHPUnit

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/litepie-layout/health.svg)

```
[![Health](https://phpackages.com/badges/litepie-layout/health.svg)](https://phpackages.com/packages/litepie-layout)
```

###  Alternatives

[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[laragear/two-factor

On-premises 2FA Authentication for out-of-the-box.

339785.3k8](/packages/laragear-two-factor)[casbin/laravel-authz

An authorization library that supports access control models like ACL, RBAC, ABAC in Laravel.

324339.9k4](/packages/casbin-laravel-authz)[aedart/athenaeum

Athenaeum is a mono repository; a collection of various PHP packages

245.2k](/packages/aedart-athenaeum)[rahul900day/laravel-captcha

Different types of Captcha implementation for Laravel Application.

10715.9k](/packages/rahul900day-laravel-captcha)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)