daily-five / plates-components
This is a Plates PHP template engine extension for easy build reusable nested components.
Maintainers
Requires
- php: ^7.2 | ^8.0
- league/plates: ^3.0
Requires (Dev)
- phpunit/phpunit: ^8.5 | ^9.0 | ^10.0 | ^11.0 | ^12.0
- squizlabs/php_codesniffer: ^3.0
This package is auto-updated.
Last update: 2026-06-02 09:34:30 UTC
README
This extension brings Laravel's powerful components and slots feature to the Plates template engine, enabling you to build reusable components using native PHP. If you appreciate the component-based architecture found in modern frontend frameworks like Vue.js, this extension provides a familiar and efficient way to structure your views.
Table of contents
Usage
To demonstrate how cool Components are, let's make an empty-state-container component on the top of tailwindcss and Lucide Icons.
Structure:
app/
├── templates/ # Application templates
│ ├── components/ # Reusable components
│ │ └── empty-state-container.php
│ └── main-layout.php
└── index.php
File: index.php
<?php
// Composer autoloader
require_once 'vendor/autoload.php';
// Create an instance of the template engine
$templateEngine = new \League\Plates\Engine('templates');
// Load the components extension
$templateEngine->loadExtension(new \DailyFive\PlatesExtensions\Components());
// Render the template
echo $templateEngine->render('main-layout');
File: templates/main-layout.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Plates Components are cool</title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<script src="https://unpkg.com/lucide@1"></script>
</head>
<body>
<div class="max-w-lg mx-auto py-8 space-y-4">
<?= $this->component('components/empty-state-container') ?>
<?= $this->slot('icon') ?>
<i data-lucide="check" class="size-18"></i>
<?= $this->endSlot() ?>
<?= $this->slot('title') ?>
Greate Job
<?= $this->endSlot() ?>
<?= $this->slot('message') ?>
You've done all your work today!
<?= $this->endSlot() ?>
<?= $this->endComponent() ?>
<?= $this->component('components/empty-state-container') ?>
<?= $this->slot('icon') ?>
<i data-lucide="inbox" class="size-18"></i>
<?= $this->endSlot() ?>
<?= $this->slot('title') ?>
Empty
<?= $this->endSlot() ?>
<?= $this->slot('message') ?>
There are no projects you can handle!
<?= $this->endSlot() ?>
<?= $this->slot('action') ?>
<a class="text-sm no-underline hover:opacity-50 transition-opacity rounded-sm px-4 py-2 mb-2 inline-block text-white bg-green-800" href="#0">Create a new project</a>
<?= $this->endSlot() ?>
<?= $this->endComponent() ?>
</div>
<script>
lucide.createIcons();
</script>
</body>
</html>
File: templates/components/empty-state-container.php
<div class="bg-gray-50 border border-gray-100 rounded-xl space-y-8 py-8">
<?php if (isset($icon)): ?>
<div class="text-center text-gray-500 flex justify-center"><?= $icon ?></div>
<?php endif; ?>
<div class="space-y-2">
<?php if (isset($title)): ?>
<div class="text-center text-2xl text-gray-500"><?= $title ?></div>
<?php endif; ?>
<?php if (isset($message)): ?>
<div class="text-center text-xl"><?= $message ?></div>
<?php endif; ?>
</div>
<?php if (isset($action)): ?>
<div class="text-center"><?= $action ?></div>
<?php endif; ?>
<?= $slot ?? '' ?>
</div>
Installation
Install via CLI
composer require daily-five/plates-components
If you have permission problems at installation, try this solution
Contributing
Please see CONTRIBUTING for details.
License
The Plates extension is licensed under the MIT license.