Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Browse all series

Build Advanced Components for Filament

Once you're confidently building interfaces with all the components that are included with Filament, you'll likely want to begin building your own custom ones.

Hi, I'm Dan: the co-founder of Filament. This series will teach you how to build components, like custom form fields and table columns, and how to distribute them in a plugin package. Meanwhile, you'll get to know all the tools of Filament's internal component system. Excited?

Progress

Series Info

Episodes
17
Run Time
2h 32m
Difficulty
Advanced
Last Updated
Sep 18, 2023
Version
Latest
Play Series

Series Episodes

  1. Component Classes (5)

    1. Rendering Components

      Component classes are the building blocks of Filament's interface. In this episode, we'll learn how to create a basic component class, and how to render it in a view.

    2. Function Evaluation

      Function evaluation is a powerful tool that allows you to pass functions to component setter methods, which are called during the render process by getter methods.

    3. Global Component Configuration

      Global component configuration allows you to define a set of default configuration settings for all instances of a component.

    4. Macros

      Macros allow you to extend a PHP class' functionality by adding new methods to it at runtime.

    5. The Base Component Class

      Filament's base Component class provides a lot of functionality, which is inherited by all internal and custom components to make them easier to build.
  2. Building Custom Components (6)

    1. Build a Custom Form Field

      Custom form fields allow you to create your own inputs that can be used in any Filament form. In this episode, we'll integrate an external JavaScript library with a Filament form.

    2. Build a Custom Form Layout

      Custom form layouts allow you to wrap other form components in a custom design, changing their position and hierarchy.

    3. Build a Custom Infolist Entry

      Custom infolist entries allow you to create your elements that can be used in any Filament infolist to render read-only data in a visually appealing way.

    4. Build a Custom Infolist Layout

      Custom infolist layouts allow you to wrap other infolist components in a custom design, changing their position and hierarchy.

    5. Build a Custom Table Column

      Custom table columns allow you to display data from the database in a table cell with full control over the design. In this episode, we'll also learn how to use Alpine.js and Livewire to allow the state of a table column to be changed and persisted in the database.

    6. Build a Custom Table Filter

      Custom table filters allow you to use existing Filament form components to filter the records in a table. In this episode, we'll also learn about how the setUp() method can be used to create reusable component classes that have a default configuration when they are instantiated.
  3. Building a Plugin (6)

    1. Setting up a Plugin

      Setting up a Filament plugin shares a lot in common with creating a basic Laravel package. In this episode, we'll use Spatie's Package Tools to make the process even easier.

    2. Distributing Components in a Plugin

      Being able to distribute your custom components in a plugin is as simple as moving them from your app into the package's directory, updating the namespaces of classes and path to views.

    3. Registering Plugin Assets

      Registering plugin assets allows you to publish them to the public directory of the app, making them available to the browser. This is useful if you wish to avoid using a CDN to load external JavaScript libraries, like we did when creating a custom form field.

    4. Using Async Alpine Components

      Async Alpine components allow you to bundle Alpine.js code into an external JavaScript file, which can be loaded in the browser on-demand without needing to be inlined in the view. Pages that don't use the component won't need to load the JavaScript file, improving frontend performance.

    5. Panel Builder Plugins

      The panel builder can be extended and configured using a plugin object, that is registered in the panel's service provider class in the app. This plugin object allows you to interact with the panel object to register resources and more.

    6. Distributing a Panel in a Plugin

      Being able to distribute an entire Filament panel inside a self-contained plugin is as simple as moving the panel's service provider class from the app into the plugin, and registering it.

Continue Learning

Blaze Deep-Dive thumbnail

Blaze Deep-Dive

With Caleb Porzio

Blade components are slow. Really slow. At scale, they quietly become the biggest bottleneck in your Laravel application. We discovered this while trying to make Flux as fast as possible, and the result is Blaze: a package that fundamentally rethinks how Blade components are compiled and rendered. With multiple levels of optimization, Blaze can shave hundreds of milliseconds off a page load, making Blade rendering up to 25x faster in some cases.In this series, we'll install it, benchmark it, build a toy version from scratch so you truly understand how it works, and then master every directive and edge case so you can squeeze maximum performance out of your own apps.

  • 20 Episodes
Customizing Filament For User-Facing Apps thumbnail

Customizing Filament For User-Facing Apps

With Shruti Balasa

In this series, we'll build a real, user-facing app called Booknest using Laravel and Filament. We'll begin with a fresh install and begin pushing Filament beyond the usual "internal admin only" setup that you typically see. It's capable of so much more.

  • 14 Episodes
Filament 5 in Depth thumbnail

Filament 5 in Depth

With Kevin McKee

Filament's powers have increased exponentially. Now at version 5, it's more powerful and capable than ever. In this series, we'll build a practical Roadmap app from scratch, using Filament for the admin panel and Livewire for the public-facing side.Along the way, we'll cover panel configuration, enum-driven UI, strict authorization with policies, and newer form inputs like ToggleButtons, Sliders, and the TipTap-powered RichEditor. By the end, you'll have a full-featured app and a solid handle on everything new in Filament.

  • 16 Episodes
Build Native Apps With PHP thumbnail

Build Native Apps With PHP

With Simon Hamp

Welcome to my CreatorSeries! I’m Simon, and in this series we’re going to learn about NativePHP and use it to build true native applications for desktop and mobile. We're not talking about web apps accessed through the browser. Your users will be able to install directly on their devices. This is a big leap forward for the PHP ecosystem, and while it’s a real paradigm shift from the way we normally build with PHP and Laravel, we’ve worked hard to keep it familiar and approachable. So grab a warm drink, get comfortable, and let's start building!

  • 17 Episodes
Everything New in Livewire 4 thumbnail

Everything New in Livewire 4

With Caleb Porzio

Livewire 4 is a major release, and it's packed with features you're going to love. View-based components keep your PHP and Blade together in one file. Islands let you create isolated, independently-updating regions without the overhead of nested components. New directives like wire:sort tackle big things with minimal code. And a powerful JavaScript interceptor system gives you fine-grained control over every request.Whether you're upgrading an existing app or starting fresh, this series will walk you through everything new, from the fundamentals to the advanced stuff. Let's dig in.

  • 25 Episodes