Download the PHP package laboiteacode/filament-dashboard-widgets without Composer

Filament Dashboard Widgets

A collection of ready to use, professional dashboard widgets for Filament, oriented towards SaaS products, CRMs, back-offices and business tools.

Filament ships the primitives; developers keep rebuilding the same KPI cards, goals, progressions, breakdowns and short lists on top of them. This package provides fifteen distinct, polished widgets with a consistent, typed API, a professional look and a quick install with no additional front-end dependencies.

Features

• Fifteen distinct widgets: metric, goal progress, breakdown, trend, recent items, composition, detail list, bullet, funnel, timeline, variance, segment bar, usage limits, comparison chart and a flexible, customizable card.
• Consistent, typed API built on fluent, immutable friendly data objects.
• Static or computed data, with closures evaluated at render time.
• Native Filament everywhere it counts: empty states, badges, icons, links and actions all use Filament's own components, so they follow your panel.
• Light and dark themes and full responsiveness out of the box.
• No front-end build step: a small, self contained stylesheet is injected inline, using Filament design tokens and the panel accent colour.
• Accessible: structured headings, screen reader labels, WCAG AA contrast in both themes, keyboard focus styles and prefers-reduced-motion support.
• Escaped by default, with no query ever run by the package.

Requirements

• PHP 8.3, 8.4 or 8.5
• Laravel 12 or 13
• Filament 4.12+ or 5.7.1+

Installation

The package works out of the box. Publishing its resources is optional:

Registering the plugin

Register the plugin on your panel:

Each widget shipped by the package is an abstract class. Your application extends it and provides the data. You then register your concrete widgets like any other Filament widget:

Building a widget

MetricWidget

Displays a primary indicator with context and a trend.

Trend semantics:

• A trend above zero is positive, below zero is negative, zero or absent is neutral.
• Call ->lowerIsBetter() to invert the semantics, for example when a drop in the error rate is a good thing.
• Non numeric values are supported when no trend is computed.

GoalProgressWidget

Displays the progress towards a goal.

The percentage is capped at 100 by default and the overflow is shown in the text. Call ->allowOverflow() to display the real percentage beyond 100. Zero targets and negative values are handled explicitly.

RecentItemsWidget

Displays a short list of recent items without needing a full table widget.

The "View all" footer is a real Filament action. Return a URL from getViewAllUrl() to reveal it, or override viewAllAction() for full control.

BreakdownWidget

Displays a simple breakdown without forcing a complex chart.

Percentages are computed from the total of the items. Provide an explicit total with getTotal(), sort by descending value with shouldSortByValue(), and cap the number of visible items with the breakdown.limit config.

TrendWidget

Displays a time series with a summary, built on Filament's native chart widget.

The supported types are line, bar and area. The data is prepared in PHP and drawn by Filament's Chart.js integration; no JavaScript ships with this package.

CompositionWidget

Displays a part to whole breakdown as a radial chart, built on Filament's native chart widget.

The supported types are doughnut, pie and polarArea. Slice colours resolve to your panel's registered Filament colours (unassigned slices cycle the default palette), and the total is surfaced in the summary.

DetailListWidget

Displays a sober key to value panel, ideal for record summaries in CRMs and back-offices.

Rows render as a semantic description list. Empty values fall back to a placeholder, and a value can carry a badge, an icon or a link.

BulletWidget

Displays a value against a target with qualitative context bands and an optional benchmark marker (a bullet graph).

The ranges() thresholds draw neutral poor / fair / good context bands, a tick marks the target and a dot marks the benchmark. The status is always textual, so the reading is never carried by colour alone. Use ->lowerIsBetter() when a smaller value is the goal.

FunnelWidget

Displays an ordered conversion funnel with the drop-off between steps.

Each bar tapers relative to the first stage, the connectors show the step conversion, and the overall conversion is summarised at the bottom.

TimelineWidget

Displays a vertical activity or audit feed with relative times.

Times are shown relatively (locale aware), events can be grouped by day, and the footer "View all" is a native Filament action.

VarianceWidget

Displays categories ranked by their change, as diverging bars around a zero axis.

The bar grows right for gains and left for losses. The sign is carried by the side, the signed text and an icon, never by colour alone. Provide an explicit ->change(), or a ->previous() value to derive it, and use ->lowerIsBetter() per item.

SegmentBarWidget

Displays a whole split into proportional segments on a single stacked track, reusing the BreakdownItem object.

The legend below carries the label, value and share, so meaning is never conveyed by colour alone. Provide getTotal() to render unfilled headroom.

UsageLimitsWidget

Tracks consumption against quotas, one meter per resource, with an optional warning threshold.

Each row is a role="meter" progress track. It turns to the warning colour once ->warnThreshold() (a fraction of the limit) is crossed, and to danger when over the limit. Format the value and limit with ->formatUsing().

ComparisonChartWidget

Plots several series against a shared set of labels, for example actual versus target versus forecast, which a single trend line cannot show.

Each series renders as a line or bar (->type()) and takes a Filament colour token via ->color(); series without one cycle the default palette. A ->filled() line series shades the area under the line with a translucent tint of its colour, in light and dark themes alike. Built on Filament's own ChartWidget.

CardWidget

A flexible, customizable card for the pieces a dashboard always needs but that do not warrant a dedicated widget: a highlight, a shortcut, an announcement or a call to action. One widget, four layout variants. Register as many as you like and size each one with Filament's columnSpan.

The four variants share the same fluent object:

• stat: a label, a large ->value() (with ->formatUsing()), an optional ->badge() and a corner ->icon(). A lighter KPI card than MetricWidget.
• icon: a prominent ->icon() tile next to a title and ->description(). Ideal for navigation and shortcuts. Set ->url() to make the whole card a link.
• content: a title, an optional ->badge(), free ->description() text and footer links from ->actions(). The generic catch all card.
• cta: a centred call to action with an ->icon(), text and native Filament action buttons built from ->actions().

Any stat, icon or content card becomes clickable with ->url(), and every colour, badge, icon and button uses Filament's own components and tokens.

Customization

Common options are shared across the widgets:

Widths use Filament's native columnSpan:

Themes

The widgets follow Filament automatically:

• Colours resolve to your panel's registered Filament colours, so nothing is hard coded and the accent colour is respected.
• Light and dark themes are fully supported.
• Interactive cards use a subtle hover effect that honours prefers-reduced-motion.

Polling

Polling is disabled by default. Set a global default in the config, or override it per widget:

Cache

The package does not cache anything for you, but caching your data is easy:

Translations

English and French translations are shipped. Publish them to customize:

The titles and business data always come from your application; only the shared labels ("View all", "Remaining", "Goal reached", and so on) are translated.

Going further

• Architecture and design decisions
• A complete demo dashboard
• Upgrade guide
• Changelog

Testing

Contributing

Please see CONTRIBUTING.md for details.

Security

Please see SECURITY.md for how to report vulnerabilities.

Credits

• Alexandre Ribes
• La Boite A Code

License

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