img

5 min read

How We Enhanced Filament with Widget Tabs - A Smarter Way to Visualize Data

Interested in generating passive income? Join our partnership program and receive a commission on each new client referral. Learn more.

filament pluginAs long-time Filament users and now sponsors, we at Redberry have always admired its elegance and developer experience. Filament significantly simplifies building admin panels with Laravel and provides structure, clarity, and flexibility out of the box. Yet, as with any framework, real-world projects occasionally reveal gaps - moments when a minor enhancement can dramatically improve usability.

One of those moments led to the creation of Widget Tabs. What began as a quick internal solution to make Filament’s tab system more interactive soon evolved into a standalone, open-source plugin that has already been downloaded over 1,400 times.

In this article, we’ll walk through how the idea was born, the challenge it solved, and how Widget Tabs extends Filament’s default components into something more dynamic, bridging functionality and data visualization within a single, intuitive interface.

The Challenge and the Concept

Filament’s default Tabs component is excellent for filtering and organizing data, but its simplicity can also be limiting. In one of our internal projects, we reached a point where that limitation became clear: the standard tabs were functional but visually static. We wanted them to play a more active role in the interface.

Our goal was to make tabs feel like dashboard widgets - components that not only filter but also convey meaningful data at a glance. Instead of a plain “Published” tab, we envisioned something more informative, displaying:

  • an icon for quick visual recognition,
  • a label for context, and
  • a dynamic value, such as a record count (e.g., “Published: 125”).

This approach would allow users to see key metrics directly from the list page without switching to a separate dashboard view. We wanted each tab to serve a dual purpose: act as a one-click filter while also offering a high-level snapshot of the underlying data.

That need to blend interaction with information became the foundation of the Widget Tabs Plugin, a reimagined version of Filament’s native tabs built to make data visibility part of everyday navigation.

Development Process: From Internal Feature to Open-Source Plugin

The feature began as a one-off solution for an internal project, built to solve a simple but essential problem: improving data visibility directly within the list view. The impact was immediate. Team members could see the state of their data at a glance - a small enhancement that delivered a significant boost to usability.

Recognizing its potential beyond a single project, our developer Davit Shkubuliani decided to rebuild the feature from the ground up as a public, open-source plugin. The goal was to offer the Filament community a lightweight yet powerful enhancement that could be seamlessly integrated into any dashboard.

During this transition, engineering priorities were clearly defined across three core principles:

1. Native Compatibility

The plugin had to do more than resemble Filament - it had to feel native to it. Widget Tabs integrates cleanly with Filament’s architecture by introducing a simple HasWidgetTabs trait on your ListRecords page and implementing a familiar getWidgetTabs() method, mirroring Filament’s own tab behavior.

2. Modular Extensibility

Flexibility was essential. The plugin was designed to be fully customizable and scalable, supporting:

  • Custom icons, labels, and data values.

  • Configurable widgets per row for responsive layouts.

  • Percentage displays with adjustable decimal precision.

  • Multiple theming options - including predefined color themes (success, danger, info, etc.), gradient styles, and custom CSS classes.

This level of control allows developers to adapt Widget Tabs to virtually any design system or dashboard layout without sacrificing consistency.

3. Seamless User Experience

The final result delivers on the original vision: widget-style tabs that enrich the interface with real-time insights while retaining Filament’s intuitive filtering behavior. With a single click, users can filter datasets just as before - now with the added benefit of visual context and immediate feedback.

This evolution, from a specific in-house requirement to a polished, open-source tool, embodies the spirit of the PHP and Laravel ecosystems. At Redberry, we’re proud to contribute Widget Tabs as part of our ongoing commitment to building more intuitive, data-driven, and community-powered admin experiences.

Why It Matters and How to Try It Yourself

Great ideas often start small, from real, everyday challenges our developers face. Widget Tabs is one of those stories: what began as a simple internal enhancement turned into a plugin now used by hundreds of developers across the Filament community.

It’s also a reflection of how we work. Curiosity, craftsmanship, and contribution are deeply woven into our culture. As a sponsor of Filament and an official Laravel partner agency, we don’t just build with these tools - we actively look for ways to make them better and share those improvements with the community.

If you’d like to see what Widget Tabs can do, you can explore it here:
👉 Filament Widget Tabs Plugin

If you find it useful, consider giving it a ⭐️ on GitHub - it helps more developers discover the plugin and keeps open-source work like this moving forward. We’d also love to hear your feedback or contributions.

img

Meet the authors

We are a 200+ people agency and provide product design, software development, and creative growth marketing services to companies ranging from fresh startups to established enterprises. Our work has earned us 100+ international awards, partnerships with Laravel, Vue, Meta, and Google, and the title of Georgia’s agency of the year in 2019 and 2021.

img
CONTACT US