Project Essentials — UI components, form fields, table columns & helpers for Filament

Essential UI components, form fields, table columns, infolist entries, traits, and helpers for Laravel and Filament v4 / v5 projects. A curated component library distilled from every Codenzia Filament app — the bits we reach for in every project that aren't worth re-implementing each time.

Why this exists. Every Filament CRUD project eventually needs a progress column, a coloured-pill list, an icon picker, an RTL-aware paginator, a tag column with overflow handling, a percentage slider form field. Building these one project at a time is wasted hours; bundling them into a versioned package keeps the API consistent across every app you ship.

Try it live: A working integration is included in the Codenzia plugins demo at /admin/demo/project-essentials.

Requirements

Features

UI Components

• Progress — Circular SVG progress indicator with gradient colors
• Pagination — Custom Laravel pagination view with RTL and dark mode support
• IconPicker — Filament form select with 45+ categorized Heroicons
• DropdownCheckList — Multi-select dropdown with search, avatars, and enum support
• DropdownLink — Styled dropdown link item
• SplitButtonDropdown — Split button with main action + dropdown menu
• PercentageSlider — Interactive 0-100% slider form field
• CounterInput — Increment/decrement number input field
• ProgressBarColumn / ProgressBarEntry — Progress bar for tables and infolists
• ColoredEnumColumn / ColoredEnumEntry — Enum-aware colored columns and entries
• HtmlColumn — Render raw HTML content in table columns
• UserAvatarColumn / UserAvatarEntry — User avatar display with fallback
• TagColumn / TagEntry — Tag display with color randomization and context limits
• ColoredPillsColumn / ColoredPillsEntry — Generic colored pill badges with per-item colors, sizes, enum support, and hover card overflow
• PriorityColumn / PriorityEntry — Priority display with icon, color, and label from enums
• CircularProgressBar — SVG circular progress bar with gradient
• CreatedUpdatedColumn / CreatedUpdatedEntry — Created/updated timestamps with user avatars
• StateSwitcher — Toggle column with configurable on/off enum states and labels
• ResponsiveTabs — Responsive tabs with overflow "More" dropdown
• LoadingSpinner — Advanced loading spinner with 4 variants (minimal, elegant, orbital, pulse)
• Banner — Top-of-page notification banner with success/danger/warning styles
• GridLayoutSwitcher — Session-persistent grid size slider
• ColumnToggle — Custom column visibility toggling with session persistence
• LocaleSwitcher — Self-contained language switcher dropdown (works in Filament panels AND public Blade pages; no flag-icons or host-Tailwind dependency)

Form Components

• IconColoredEnumSelect — Rich select with colored icons for enums
• DatePickerWithHint — DatePicker with auto format hint from config
• DateTimePickerWithHint — DateTimePicker with auto format hint from config
• CounterInput — Stepper number input with +/- buttons
• DateRangePicker — Date range picker with from/to inputs, clear button, and locale-aware display
• CardRepeater — Card-based repeater with inline/card modes, relationship support, and CRUD actions

Table Filters

• DateRangeFilter — Table filter using DateRangePicker with automatic query scoping and indicators

Helpers

• DateHelper — Date formatting, duration, and human-readable format hints
• DateRangeHelper — Parse and format date ranges
• FileHelper — File type detection by extension
• TailwindHelper — Tailwind v4 safe dynamic color class resolver
• FormatHelper — Text truncation, hex-to-rgba, formatted IDs
• FilamentTableHelper — Reusable timestamp/userstamp columns and search filters

Traits

• IconColoredEnum — Labels, icons, and colors for PHP enums
• Userstamps — Auto-track created_by / updated_by on models
• CanToggleColumns — Session-persistent table column toggling
• CanFixFilamentActionCancel — Fix for Filament modal cancel bug
• CanLogsActivity — Automatic activity logging with elegant diffing
• HasGridLayoutSwitcher — Grid layout size with session persistence
• HasDashboardDateFilter — Dashboard widget date filtering
• HasHeaderFormActions — Mirror form footer actions to page header
• HasPageSettings — Database-backed per-user page settings with presets, grouping, reordering, live preview, and admin bulk-apply
• HasColoredEnumViewComponent — Enum coloring for columns/entries
• HasProgressBarViewComponent — Configurable progress bar rendering
• HasUserAvatarViewComponent — Size configuration for avatar columns/entries
• HasCreatedUpdatedViewComponent — Username limit configuration for created/updated columns/entries

Requirements

• PHP 8.3+
• Laravel 12+
• Filament 4.x

Installation

Publish the config (optional):

Publish and run migrations (required for HasPageSettings):

Publish views for customization (optional):

Plugin Registration

Register the plugin in your Filament panel provider:

Traits

IconColoredEnum

Gives PHP backed enums labels, icons, and Tailwind-compatible colors.

Userstamps

Automatically tracks created_by_user_id and updated_by_user_id on Eloquent models.

Configure the User model in config/project-essentials.php:

CanToggleColumns

Session-persistent column visibility toggling for Filament tables. Replaces Filament's built-in toggle with a custom dropdown.

CanFixFilamentActionCancel

Fixes a bug in Filament where modalCancelAction callbacks execute on modal render instead of button click.

HasGridLayoutSwitcher

Provides session-persistent grid layout size switching for Filament pages with card/grid views.

HasDashboardDateFilter

Adds date range filtering to Filament dashboard widgets.

HasHeaderFormActions

Mirrors form footer actions (Save, Cancel, etc.) to the page header automatically.

HasPageSettings

Database-backed per-user settings modal for any Filament page or widget. Supports section grouping, admin presets, live preview, reset to defaults, scoped settings, and bulk-apply to roles/teams.

Requires migration — run php artisan vendor:publish --tag="project-essentials-migrations" && php artisan migrate

Basic Usage (raw Filament components)

Fluent Definitions with PageSettingDefinition

Use the fluent builder for grouped settings with labels, descriptions, and defaults:

Live Preview

Enable reactive updates that apply instantly as the user toggles settings (before submitting):

Scoped Settings

Store different settings per context (e.g., per project):

Admin Presets

Save and load named configurations:

When presets exist for a page, a "Load Preset" dropdown automatically appears at the top of the settings modal.

Bulk Apply (Admin)

Push settings to all users with a specific role or in a department:

Reset to Defaults

A "Reset to Defaults" button is automatically added to the settings modal footer. You can also call it programmatically:

Default Values

Define sensible defaults that apply before the user ever opens the modal:

When using PageSettingDefinition, defaults are automatically extracted from each definition's ->default() value.

Available Methods

Overridable Methods

CanLogsActivity

Automatic activity logging for Eloquent models. Tracks creates, updates, and deletes with human-readable descriptions.

Requires an activity_logs table with columns: user_id, model_id, model, current_data, new_data, description, created_at, updated_at.

HasCreatedUpdatedViewComponent

Mixin trait for CreatedUpdatedColumn and CreatedUpdatedEntry. Provides a limit() method to truncate displayed usernames.

HasColoredEnumViewComponent

Mixin trait for Filament columns/entries to support enum-based coloring. Used internally by ColoredEnumColumn and ColoredEnumEntry.

HasProgressBarViewComponent

Configurable progress bar rendering with label, alignment, font sizes, and value visibility. Used internally by ProgressBarColumn and ProgressBarEntry.

HasUserAvatarViewComponent

Size configuration mixin for avatar columns/entries. Used internally by UserAvatarColumn and UserAvatarEntry.

Form Components

IconColoredEnumSelect

A rich Filament Select with colored icons for PHP enums using IconColoredEnum. Supports two visual modes: icon + colored text (default) and badge (colored background pills with icon).

DatePickerWithHint

DatePicker that auto-applies config('app.date_format') with a human-readable format hint icon.

PercentageSlider

Interactive slider for 0-100% values with +/- buttons and drag support.

CounterInput

Stepper number input with increment/decrement buttons.

DateTimePickerWithHint

DateTimePicker that auto-applies config('app.datetime_format') with a human-readable format hint.

DateRangePicker

A date range picker field with From/To inputs, locale-aware display formatting, and a clear button. Matches Filament's native DatePicker styling.

State structure: ['from' => '2024-01-01', 'to' => '2024-12-31']

CardRepeater

A card-based repeater field that displays items as read-only cards with inline editing. Supports two modes: card mode (read-only cards with edit-on-click) and inline mode (form fields always visible). Full relationship support for HasMany and BelongsToMany.

Note on tableHeader() vs inline @if($isFirst) headers. It's tempting to put a column header inside the first card's view using @if($isFirst), but that makes the first card taller than the rest and breaks any absolute positioning the wrapper does (notably the hover-only delete button alignment). Use tableHeader() instead — the header renders once above the grid and every card wrapper stays the same height.

Table Filters

DateRangeFilter

A table filter that uses DateRangePicker for date range filtering. Automatically builds the query, formats indicators, and supports custom column targeting.

Table Columns

ColoredEnumColumn

TextColumn with automatic enum-based coloring and icons.

ProgressBarColumn

Visual progress bar column for tables.

HtmlColumn

Renders raw HTML content in a table column.

UserAvatarColumn

Displays user avatars with automatic fallback. Resolves user from relationships automatically.

TagColumn

Displays tags as colored badges with configurable context limits. Supports random or gradient colors.

ColoredPillsColumn / ColoredPillsEntry

Generic colored pill badge component for tables and infolists. Each item can have its own color, size, and tooltip. Overflow items are shown in a polished hover card (teleported to body to escape table overflow). Both components share a single blade view.

Supports two modes:

• Manual — provide itemColor(), itemTooltip(), itemSubtitle() closures for full control
• Enum — pass an IconColoredEnum-based enum via enum() to auto-resolve colors, tooltips, and subtitles

PriorityColumn

Displays priority with icon and color from your enum. Works with any enum implementing HasLabel, HasColor, and HasIcon contracts, or with static color()/icon() methods.

CircularProgressBar

SVG circular progress bar with gradient colors. Reads real_progress from the record.

CreatedUpdatedColumn

Shows created/updated timestamps with user avatars. Requires created_at, updated_at timestamps and optionally createdByUser/updatedByUser relationships on the model.

StateSwitcher

A toggle button column with configurable on/off states. Works with string-backed enums, plain strings, integers, or booleans.

Infolist Entries

ColoredEnumEntry

TextEntry with enum-based coloring for infolists.

ProgressBarEntry

Progress bar entry for infolists.

UserAvatarEntry

User avatar display for infolists.

TagEntry

Tag display for infolists. Same rendering as TagColumn.

PriorityEntry

Priority display for infolists with icon and color from your enum.

CreatedUpdatedEntry

Created/updated timestamps with user avatars for infolists.

Filament Actions

SplitButtonDropdownAction

A split button with a main action on the left and a dropdown chevron on the right showing all actions. Works in both page-level header actions (getHeaderActions()) and table header/record actions — it auto-detects table context and injects it into child actions when available.

Important: Only use Action::make() (Filament\Actions\Action) inside the split button. Do not use CreateAction, EditAction, DeleteAction, or any other specialized Filament action class. These specialized actions rely on internal Livewire method routing (e.g. mountAction('create')) that breaks when nested inside an ActionGroup. The primary (left) button will silently fail to fire. Instead, use a regular Action::make() with an explicit ->schema() and ->action() callback.

Helpers

TailwindHelper

Resolves Tailwind v4 dynamic color class issues. Maps Filament color names to full, statically-analyzable class strings.

DateHelper

DateRangeHelper

FileHelper

FormatHelper

FilamentTableHelper

Adds reusable timestamp and userstamp columns to any Filament table.

Blade Components

DropdownCheckList

A multi-select dropdown with checkboxes, optional search, avatar support, and enum integration.

ResponsiveTabs

A responsive tab component that automatically folds overflow tabs into a "More" dropdown when space is limited. Supports Livewire binding, localStorage persistence, badges, icons, disabled tabs, and two layout modes.

Tab options — each entry in the tabs array supports:

Stacked layout is ideal when you have many tabs (8+). It renders each tab as a vertical column with the icon on top and label below, reducing per-tab width by ~40% so more tabs fit before overflowing into the "More" dropdown. Badges are rendered as floating pills on the icon's top-right corner.

Requires importing the JS component in your app.js:

LoadingSpinner

Advanced loading overlay with 4 visual variants, configurable blur, opacity, and theme.

LocaleSwitcher

A standard language-switcher dropdown that renders identically inside a Filament panel and on any public Blade page. It ships its own scoped CSS — no flag-icons library and no reliance on the host's Tailwind build (the failure mode that breaks utility-class-based switchers on public sites). It shows a globe glyph + the current code, and lists locales by native name with a checkmark on the active one. Dark mode and RTL are handled automatically.

Requires a named route to switch locale (default locale.switch, receiving the locale code):

The dropdown only renders when more than one locale is available. Alpine.js (bundled with Filament/Livewire) powers the open/close.

Banner

Top-of-page notification banner with success/danger/warning styles.

UserAvatar

Displays user avatars with automatic fallback. Works standalone or within Filament Column/Entry context.

DropdownLink

A styled link for use inside dropdown menus.

Progress

A circular progress indicator with SVG arc and gradient colors.

Pagination

IconPicker (Form Component)

License

The MIT License (MIT). Please see License File for more information.