Filament Vertical Tabs Laravel Package

Getting Started

1. Install: composer require afs19/filament-vertical-tabs. Laravel package auto-discovery handles the service provider in a standard Filament v3 app — only register manually if you've disabled discovery or use a custom bootstrap (bootstrap/providers.php).
2. Clear what Filament caches: php artisan filament:cache-components && php artisan view:clear, then hard-refresh the panel.
3. First place to look: vendor/afs19/filament-vertical-tabs/src/. The package is small — the component class (and any published Blade view) is the whole surface area. Read that tag's README in vendor/, not the main branch docs, since small packages rename classes between releases.
4. First use case: take an EditResource that already splits its form across 4+ tabs (General / SEO / Media / Advanced) and swap the horizontal container for the vertical one — the tab labels become a left-hand rail, form fields stay in the right panel.

Minimal shape (confirm the exact class/namespace against the installed README):

public static function form(Form $form): Form
{
    return $form->schema([
        VerticalTabs::make()
            ->columnSpanFull()
            ->tabs([
                Tab::make('General')->schema([...]),
                Tab::make('SEO')->schema([...]),
            ]),
    ]);
}

Keep Tab::make() imported from Filament\Forms\Components\Tabs\Tab — only the container changes.

Implementation Patterns

• Find-and-replace swap. The package is designed as a substitute for Filament\Forms\Components\Tabs. Migrate one resource, eyeball it, then roll out. Because Tab and the schema API are unchanged, the diff stays tiny and reviewable.
• Where it earns its keep. Long edit forms with 4+ logical groups: content models, settings pages, product catalogs. Below three tabs the vertical rail wastes horizontal real estate — leave those horizontal.
• Full-width layout. Add ->columnSpanFull() on the container so the rail plus panel span the grid. Without it the component can render in a single narrow column and look broken.
• Deep links. If the component exposes persistTabInQueryString(), wire it up so support can send /admin/posts/1/edit?tab=seo and land on the right panel. This is the single highest-value integration for admin teams.
• Modals and relation managers. It works inside action modals, but give the modal a wide width (->modalWidth('5xl')). A rail plus form fields squeezed into md is unusable.
• Don't nest. Keep any tabs inside a vertical tab horizontal. A vertical tab inside a vertical tab breaks the width assumptions in most of these packages and is hard to navigate.
• Theming. If a Blade view is publishable (php artisan vendor:publish), publish it and align Tailwind classes with your panel's primary color and density. Load any custom CSS via ->viteTheme().
• Compose with Wizard and Section. Vertical tabs as the top-level container, a Wizard inside one tab for multi-step flows, Section for grouping within a tab — that's the pattern that scales.

Gotchas and Tips

• Filament minor-version drift. Packages this small pin loosely. After any Filament 3.x bump, smoke-test one resource with vertical tabs before promoting to staging; internal tab-rendering changes are the usual breakage.
• Assets and cache blindness. If the rail renders stacked like normal horizontal tabs, it is almost always cache: run php artisan filament:assets, view:clear, and config:clear. Add these to your deploy script.
• Autoload / namespace mismatch. Class not found after install usually means a renamed namespace between versions. Check composer.lock for the exact installed version, run composer dump-autoload, and read that tag's source rather than trusting the README on main.
• Responsive collapse. Verify on a narrow viewport. Not every vertical-tabs package collapses the rail automatically; if it doesn't, add a breakpoint class in the published view rather than patching vendor code.
• Hidden tabs still mount. Fields in inactive tabs are instantiated, so ->live() / ->reactive() fields there can fire validation and queries while the user types in a different tab. Move cross-field logic to afterStateUpdated or ->lazy() on the heavy fields.
• Test selectors. Dusk/Livewire tests that click tab labels assume horizontal order and text. Prefer assertSee on form fields or assertFormSet-style assertions over tab-order selectors.
• Extension points before forking. Look for a published config (rail width, active-tab accent, breakpoint) first. If nothing is exposed, publish the view. If you need behavior changes, wrap the vendor class in App\Filament\Components\VerticalTabs so a future upgrade is a one-file swap.
• Own it if it matters. MIT, 13 stars, low adoption score. For an internal admin panel that's fine. If the form schema is business-critical, copy the small component into app/ and treat it as first-party — it's a few hundred lines and that insulates you from abandonment without meaningfully increasing maintenance.