Progress Components
Circular and linear progress indicators with customizable colors and labels.
Circular Progress
Progress Bar
Form Fields
Custom Filament form components for common input patterns.
Icon Picker
heroicon-o-sparkles
Counter Input
Current value: 5
Percentage Slider
Current value: 45%
Icon Colored Enum Select
User Select with Avatar
A Select field that renders user options with avatar + name. Works with any model implementing Filament's HasAvatar contract.
Date Pickers with Hint
Date Range Picker
Card Repeater
Card-based repeater with inline editing, relationship support (HasMany / BelongsToMany), and CRUD actions. Supports card mode (read-only cards with edit-on-click) and inline mode (fields always visible).
No items added yet. Click "Add Item" to start.
Loading Spinners
Advanced loading overlays with 4 visual variants, configurable blur, opacity, and theme.
Spinner Variants
Minimal
Simple spinning circle
Elegant
Dual spinning rings
Orbital
Orbiting dots
Pulse
Pulsing animation
minimal
Click anywhere to dismiss
elegant
Click anywhere to dismiss
orbital
Click anywhere to dismiss
pulse
Click anywhere to dismiss
Available Props
| Prop | Default | Options |
|---|---|---|
| variant | 'elegant' | minimal, elegant, orbital, pulse |
| size | 'md' | sm, md, lg, xl |
| blur | 'md' | none, sm, md, lg, xl |
| opacity | '0' | 0-95 |
| message | 'Please wait' | Any string |
| fullscreen | true | true, false |
| showProgress | false | true, false |
| theme | 'auto' | auto, light, dark |
UI Components
Reusable Blade components for common UI patterns.
Dropdown Check List
No matches
Selected:
Responsive Tabs
Responsive tab component that automatically folds overflow tabs into a "More" dropdown. Supports Livewire binding, localStorage persistence, badges, icons, and disabled tabs.
Banner Notification
Top-of-page notification banner triggered via JavaScript events. Supports success, danger, and warning styles.
Split Button Dropdown
Split button with main action on the left and dropdown chevron showing all actions.
Custom Pagination
Custom Laravel pagination view with RTL and dark mode support.
Grid Layout Switcher
Session-persistent grid layout size slider (1-6 columns). Add to page header actions.
Column Toggle
Session-persistent column visibility toggling for Filament tables.
Data Display Components
Table columns for rich data presentation.
Table Columns
ColoredEnumColumn
Auto-colors text and icons based on enum values.
ColoredEnumColumn::make('status')
->enum(StatusEnum::class)
ProgressBarColumn
Visual gradient progress bar with configurable label and alignment.
ProgressBarColumn::make('progress')
->progressLabel('Completion')
->alignValue('right')
HtmlColumn
Render raw HTML content in table columns.
HtmlColumn::make('custom')
->html(fn ($record) =>
'<strong>' . e($record->name) . '</strong>'
)
UserAvatarColumn
User avatars with automatic fallback.
UserAvatarColumn::make('assignee.avatar')
->size('size-10')
TagColumn
Colored tag badges with context limits and overflow count.
TagColumn::make('tags')
->label('Tags')
PriorityColumn
Priority with icon and color from your enum.
PriorityColumn::make('priority')
->label('Priority')
CircularProgressBar
SVG circular progress bar with gradient colors.
CircularProgressBar::make('progress')
->label('Progress')
CreatedUpdatedColumn
Timestamps with user avatars for created/updated.
CreatedUpdatedColumn::make('timestamps')
->limit(15)
StateSwitcher
Toggle button with configurable on/off states.
StateSwitcher::make('status')
->onState('active')
->offState('inactive')
->onLabel('Active')
->offLabel('Inactive')
ColoredPillsColumn
Colored pill badges with visible limit, enum support, and hover card overflow.
ColoredPillsColumn::make('skills')
->visibleLimit(3)
->itemLabel(fn ($item) => $item->name)
->enum(ProficiencyEnum::class, 'pivot.proficiency')
->emptyLabel('No Skills')
Table Filters
DateRangeFilter
Date range filtering using DateRangePicker with automatic query scoping, formatted indicators, and custom column targeting.
Infolist Entries
Every table column has a matching infolist entry with the same API. Use them in view pages and info panels.
ColoredEnumEntry
Enum display with icon and color
ProgressBarEntry
Visual progress bar
UserAvatarEntry
User avatar with fallback
CreatedUpdatedEntry
Timestamps with user avatars
PriorityEntry
Priority icon, color, and label
TagEntry
Colored tag badges
ColoredPillsEntry
Colored pills with hover overflow
Traits & Helpers
Reusable traits for models and pages, plus utility helper classes.
Traits
IconColoredEnum
Labels, icons, and Tailwind colors for PHP backed enums.
use Codenzia\ProjectEssentials\Traits\IconColoredEnum;
enum StatusEnum: string
{
use IconColoredEnum;
case ACTIVE = 'active';
public static function getLabels(): array
{
return [self::ACTIVE->value => 'Active'];
}
public static function getIcons(): array
{
return [self::ACTIVE->value => 'heroicon-o-check-circle'];
}
public static function getColors(): array
{
return [self::ACTIVE->value => 'success'];
}
}
Userstamps
Auto-track created_by / updated_by on models.
use Codenzia\ProjectEssentials\Traits\Userstamps;
class Invoice extends Model
{
use Userstamps;
}
// $invoice->createdByUser
// $invoice->updatedByUser
HasPageSettings
Per-user settings modal with cache persistence.
use Codenzia\ProjectEssentials\Traits\HasPageSettings;
class ListInvoices extends ListRecords
{
use HasPageSettings;
protected function getHeaderActions(): array
{
return [$this->settings([
Toggle::make('show_archived'),
Select::make('default_view')
->options(['table' => 'Table', 'grid' => 'Grid']),
])];
}
// $this->getPageSetting('show_archived', false)
}
HasDashboardDateFilter
Date range filtering for dashboard widgets.
use Codenzia\ProjectEssentials\Traits\HasDashboardDateFilter;
class RevenueChart extends ChartWidget
{
use HasDashboardDateFilter;
protected function getData(): array
{
$startDate = $this->getFilterStartDate();
}
}
HasHeaderFormActions
Mirror form footer actions to the page header.
use Codenzia\ProjectEssentials\Traits\HasHeaderFormActions;
class EditUser extends EditRecord
{
use HasHeaderFormActions;
// Save/Cancel appear in header too
}
CanLogsActivity
Automatic activity logging with elegant diffing.
use Codenzia\ProjectEssentials\Traits\CanLogsActivity;
class Invoice extends Model
{
use CanLogsActivity;
public function getActivityLogFieldMappings(): array
{
return ['client_user_id' => 'client'];
}
}
CanFixFilamentActionCancel
Fixes Filament modal cancel button callback bug.
use Codenzia\ProjectEssentials\Traits\CanFixFilamentActionCancel;
class ViewUser extends ViewRecord
{
use CanFixFilamentActionCancel;
}
CanToggleColumns
Session-persistent table column visibility toggling.
use Codenzia\ProjectEssentials\Traits\CanToggleColumns;
class ListUsers extends ListRecords
{
use CanToggleColumns;
public function table(Table $table): Table
{
return $table->columns(
$this->makeColumnsForToggle($columns)
);
}
}
Helpers
DateHelper
Date formatting, human-readable durations, and format hints.
use Codenzia\ProjectEssentials\Helpers\DateHelper; DateHelper::readableDateFormat(); // "dd/mm/yyyy" DateHelper::readableDateTimeFormat(); // "dd/mm/yyyy hh:mm" DateHelper::getHumanReadableDuration($start, $end); // "30 days (15 left)" DateHelper::getDelayPeriods(); // [1 => '1 month', ...]
DateRangeHelper
Parse and format date ranges with separator support.
use Codenzia\ProjectEssentials\Helpers\DateRangeHelper;
DateRangeHelper::make('2024-01-01', '2024-12-31');
// "01/01/2024 - 31/12/2024"
DateRangeHelper::makeShort('2024-01-01', '2024-03-15');
// "1 Jan - 15 Mar '24"
DateRangeHelper::parse('01/01/2024 - 31/12/2024');
// ['start_date' => ..., 'end_date' => ...]
FileHelper
File type detection by extension.
use Codenzia\ProjectEssentials\Helpers\FileHelper;
FileHelper::getFileType('photo.jpg'); // "image"
FileHelper::getFileType('report.pdf'); // "document"
FileHelper::getFileType('song.mp3'); // "audio"
FileHelper::getFileType('movie.mp4'); // "video"
FormatHelper
Text truncation, hex-to-rgba, and formatted ID strings.
use Codenzia\ProjectEssentials\Helpers\FormatHelper;
FormatHelper::truncateText('Long text...', 10); // "Long text ..."
FormatHelper::hexToRgba('#FF5733', 0.8); // "rgba(255, 87, 51, 0.8)"
FormatHelper::getFormattedIdString(42, 'INV'); // "#INV0042"
TailwindHelper
Tailwind v4 safe dynamic color class resolver.
use Codenzia\ProjectEssentials\Helpers\TailwindHelper;
TailwindHelper::text('primary'); // "text-primary-500"
TailwindHelper::text('danger', '600'); // "text-danger-600"
TailwindHelper::bg('success', '100'); // "bg-success-100"
TailwindHelper::border('warning'); // "border-warning-500"
FilamentTableHelper
Reusable timestamp/userstamp columns and search filters.
use Codenzia\ProjectEssentials\Tables\FilamentTableHelper;
// Append stamp columns to a table
FilamentTableHelper::appendStampColumns($table);
// Merge with column array
$columns = FilamentTableHelper::withStampColumns([
TextColumn::make('name'),
TextColumn::make('email'),
]);
// Add search filter
$filters = FilamentTableHelper::withSearchFilter([], 'name', 'Search');