Skip to content
Filament CMS

Quick Start

This guide walks you through creating a page with a hero section from scratch.

Step 1: Create a Content Block

Section titled “Step 1: Create a Content Block”

Content blocks define the form fields used when editing a section in the admin panel.

app/CMS/Blocks/Hero.php
namespace App\CMS\Blocks;


use Filament\Forms\Components\Builder\Block;
use Filament\Forms\Components\TextInput;
use Filament\Support\Icons\Heroicon;
use JFA\FilamentCMSCore\Contracts\ContentBlock;


class Hero implements ContentBlock
{
    public static function make(): Block
    {
        return Block::make('hero')
            ->schema([
                TextInput::make('label')->required(),
                TextInput::make('headline')->required(),
                TextInput::make('primary_cta_text'),
                TextInput::make('primary_cta_url'),
            ])
            ->label('Hero Section')
            ->icon(Heroicon::OutlinedStar);
    }
}

Register it in config/filament-cms-core.php:

'custom' => [
    App\CMS\Blocks\Hero::class,
],

Step 2: Create a Frontend Section Component

Section titled “Step 2: Create a Frontend Section Component”

This is the Livewire component that renders the hero on the frontend.

app/Livewire/Hero.php
namespace App\Livewire;


use JFA\FilamentCMSCore\CMS\SectionContent;
use JFA\FilamentCMSLivewire\Livewire\SectionComponent;


class Hero extends SectionComponent
{
    public string $label = '';
    public string $headline = '';
    public string $primaryCtaText = '';
    public string $primaryCtaUrl = '';


    protected function hydrateFromContent(SectionContent $content): void
    {
        $this->label = $content->hero->label ?? '';
        $this->headline = $content->hero->headline ?? '';
        $this->primaryCtaText = $content->hero->primary_cta_text ?? '';
        $this->primaryCtaUrl = $content->hero->primary_cta_url ?? '';
    }


    public function render(): \Illuminate\Contracts\View\View
    {
        return view('livewire.components.hero');
    }
}

Step 3: Create the Blade View

Section titled “Step 3: Create the Blade View”
{{-- resources/views/livewire/components/hero.blade.php --}}
<section class="py-20 bg-gray-900 text-white">
    <div class="container mx-auto px-4">
        <span class="text-sm uppercase tracking-wider text-amber-400">
            {{ $label }}
        </span>
        <h1 class="text-5xl font-bold mt-4">
            {{ $headline }}
        </h1>
        @if($primaryCtaText)
            <a href="{{ $primaryCtaUrl }}" class="mt-8 inline-block px-6 py-3 bg-amber-500 text-white rounded">
                {{ $primaryCtaText }}
            </a>
        @endif
    </div>
</section>

Step 4: Create a Page Component

Section titled “Step 4: Create a Page Component”
app/Livewire/Pages/HomePage.php
namespace App\Livewire\Pages;


use JFA\FilamentCMSLivewire\Livewire\Page;


class HomePage extends Page
{
    public function __construct()
    {
        parent::__construct(
            componentView: 'livewire.pages.home-page',
            slug: 'home',
            layout: 'layouts.app',
        );
    }
}
{{-- resources/views/livewire/pages/home-page.blade.php --}}
<div class="wrapper py-20">
    @include('filament-cms-livewire::partials.page')
</div>

Step 5: Create the Page and Section in Admin

Section titled “Step 5: Create the Page and Section in Admin”
  1. Go to /admin → CMS → Pages
  2. Click Create and fill:
    • Title: “Home”
    • Slug: home
    • Route: home
    • Status: Published
  3. Go to CMS → Sections
  4. Click Create and fill:
    • Title: “Hero”
    • Slug: hero (must match your Livewire component class name)
    • Content: Add a “Hero Section” block with your content
    • Status: Active
  5. Go back to Pages → Home → Sections
  6. Attach the “Hero” section and set order to 1

Step 6: Add the Route

Section titled “Step 6: Add the Route”
routes/web.php
use App\Livewire\Pages\HomePage;


Route::get('/', HomePage::class)->name('home');

Step 7: Visit Your Page

Section titled “Step 7: Visit Your Page”

Open http://your-app.test/ — you should see your hero section rendered!

What’s Next?

Section titled “What’s Next?”