PHPackages                             shkubu18/filament-widget-tabs - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. shkubu18/filament-widget-tabs

ActiveLibrary

shkubu18/filament-widget-tabs
=============================

Widget Tabs are modified version of Filament Tabs to display it as a widgets.

v1.0.4(6mo ago)242.6k—0%1[2 issues](https://github.com/shkubu18/filament-widget-tabs/issues)MITPHPPHP ^8.1CI passing

Since May 26Pushed 4mo agoCompare

[ Source](https://github.com/shkubu18/filament-widget-tabs)[ Packagist](https://packagist.org/packages/shkubu18/filament-widget-tabs)[ Docs](https://github.com/shkubu18/filament-widget-tabs)[ GitHub Sponsors](https://github.com/shkubu)[ RSS](/packages/shkubu18-filament-widget-tabs/feed)WikiDiscussions main Synced today

READMEChangelog (5)Dependencies (12)Versions (6)Used By (0)

Widget Tabs Plugin
==================

[](#widget-tabs-plugin)

[![Widget Tabs Banner](./resources/dist/widget-tabs-banner.jpg)](./resources/dist/widget-tabs-banner.jpg)

[![Latest Version](https://camo.githubusercontent.com/97da5cb57d6e1de520152a0640091ddf365493f5ff29499b2d227474fbb3a38e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f73686b75627531382f66696c616d656e742d7769646765742d746162733f7374796c653d666c61742d737175617265)](https://packagist.org/packages/shkubu18/filament-widget-tabs)[![Total Downloads](https://camo.githubusercontent.com/f273eeeb298b9372ba121de91a152871435ffb33132b4b40d41364b2724b16fa/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f73686b75627531382f66696c616d656e742d7769646765742d746162733f7374796c653d666c61742d737175617265)](https://packagist.org/packages/shkubu18/filament-widget-tabs)

Installation
------------

[](#installation)

Warning

This plugin currently supports **Filament v3 only** due to its reliance on Tailwind v3. Filament v4 support is not yet available.

You can install the package via composer:

```
  composer require shkubu18/filament-widget-tabs
```

In an effort to align with Filament's theming methodology you will need to use a custom theme to use this plugin.

Important

If you have not set up a custom theme and are using a Panel follow the instructions in the [Filament Docs](https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme).

1. Import the plugin's stylesheet in your theme's css file.

```
@import '/shkubu18/filament-widget-tabs/resources/css/widget-tabs.css';
```

2. Add the plugin's views to your `tailwind.config.js` file.

```
content: [
    '/shkubu18/filament-widget-tabs/resources/**/*.blade.php',
]
```

### Publishing Views

[](#publishing-views)

If you need to customize the views, you can publish them with:

```
  php artisan vendor:publish --tag=filament-widget-tabs-views
```

Usage
-----

[](#usage)

Filament Widget Tabs works similarly to [Filament Tabs](https://filamentphp.com/docs/3.x/panels/resources/listing-records#using-tabs-to-filter-the-records), but displays each tab as a “widget” that can filter your resource’s table with a single click.

### Add the `HasWidgetTabs` trait

[](#add-the-haswidgettabs-trait)

Add the `HasWidgetTabs` trait to your Filament resource page.

### Implement the `getWidgetTabs()` method

[](#implement-the-getwidgettabs-method)

Define your widget tabs by implementing the `getWidgetTabs()` method in your page class. Each tab is created with the `WidgetTab::make()` component, allowing you to specify label, icon, value, and filtering behavior:

```
use App\Enums\PostStatusEnum;
use Illuminate\Database\Eloquent\Builder;
use Filament\Resources\Pages\ListRecords;
use Shkubu\FilamentWidgetTabs\Concerns\HasWidgetTabs;
use Shkubu\FilamentWidgetTabs\Components\WidgetTab;

class ListPosts extends ListRecords
{
    use HasWidgetTabs;

    public function getWidgetTabs(): array
    {
        return [
            'all' => WidgetTab::make()
                ->label('All Posts')
                ->icon('heroicon-o-chat-bubble-left-right')
                ->value(Post::count()),
            'published' => WidgetTab::make()
                ->label('Published')
                ->icon('heroicon-o-eye')
                ->value(Post::where('status', PostStatusEnum::PUBLISHED)->count())
                ->modifyQueryUsing(fn (Builder $query): Builder => $query->where('status', PostStatusEnum::PUBLISHED)),
            'drafts' => WidgetTab::make()
                ->label('Drafts')
                ->icon('heroicon-o-archive-box')
                ->value(Post::where('status', PostStatusEnum::DRAFT)->count())
                ->modifyQueryUsing(fn (Builder $query): Builder => $query->where('status', PostStatusEnum::DRAFT)),
        ];
    }
}
```

That's all you need to get started with Widget Tabs! Your resource list page will now display beautiful widget-style tabs that filter your table data just like default Filament tabs, but with the added benefit of displaying important data values within each tab widget.

Features
--------

[](#features)

### Auto-loading Default Active Widget Tab

[](#auto-loading-default-active-widget-tab)

By default, widget tabs will not automatically load a default active widget tab when the page mounts. If you want to enable automatic loading of the default widget tab, you can override the `shouldAutoLoadDefaultActiveWidgetTab` method in your page class:

```
protected function shouldAutoLoadDefaultActiveWidgetTab(): bool
{
    return true; // Enable auto-loading of the default active widget tab
}
```

### Widget Tabs Layout

[](#widget-tabs-layout)

You can customize how many widget tabs appear in each row by overriding the `getWidgetsPerRow()` method in your page class:

```
 protected function getWidgetsPerRow(): int|array
 {
    return 4; // Default is 3 widgets per row
 }
```

It is also possible to specify an array of breakpoints for different display sizes:

```
 protected function getWidgetsPerRow(): int|array
 {
    return ['sm' => 2, 'md' => 3, 'lg' => 4];
 }
```

### Labels

[](#labels)

Add a descriptive label to your widget tab:

```
WidgetTab::make()
    ->label('Published Posts')
```

### Icons

[](#icons)

Add an icon to visually enhance your widget tab:

```
WidgetTab::make()
    ->icon('heroicon-o-document-text')
```

You can also specify the icon size:

```
use Filament\Support\Enums\IconSize;

WidgetTab::make()
    ->icon('heroicon-o-document-text')
    ->iconSize(IconSize::Large)
```

### Values

[](#values)

Display a count or other relevant value in your widget tab:

```
WidgetTab::make()
    ->value(Post::count())
```

You can control the decimal precision of numeric values:

```
WidgetTab::make()
    ->label('Average Rating')
    ->value(Post::avg('rating'))
    ->precision(2) // Will display with 2 decimal places, e.g., "4.75"
```

### Percentages

[](#percentages)

When enabled, the percentage method formats your value as a percentage, displaying it with a % symbol instead of as a regular number:

```
WidgetTab::make()
    ->value(25)
    ->percentage() // This will display as "25%" instead of "25"
```

You can control the decimal precision of percentage values independently from regular numeric values, giving you fine-grained control over how different types of data are displayed:

```
WidgetTab::make()
    ->label('Published Ratio')
    ->value(fn (): float => (Post::where('status', 'published')->count() / Post::count()) * 100)
    ->percentage()
    ->percentagePrecision(1) // Will display as "25.4%" instead of "25%"
```

### Theming

[](#theming)

Widget Tabs supports advanced theming with pre-built color schemes and gradients.

#### Pre-built Color Schemes

[](#pre-built-color-schemes)

Apply different color themes to your widget tabs:

```
WidgetTab::make()
    ->label('Success Posts')
    ->value(Post::where('status', 'published')->count())
    ->success()

WidgetTab::make()
    ->label('Failed Posts')
    ->value(Post::where('status', 'failed')->count())
    ->danger()

WidgetTab::make()
    ->label('Draft Posts')
    ->value(Post::where('status', 'draft')->count())
    ->info()
    //...
```

**Preview:**

**Success Theme****Danger Theme****Info Theme**[![Success Widget](./resources/dist/success-widget-showcase.png)](./resources/dist/success-widget-showcase.png)[![Danger Widget](./resources/dist/danger-widget-showcase.png)](./resources/dist/danger-widget-showcase.png)[![Info Widget](./resources/dist/info-widget-showcase.png)](./resources/dist/info-widget-showcase.png)**Warning Theme****Secondary Theme**[![Warning Widget](./resources/dist/warning-widget-showcase.png)](./resources/dist/warning-widget-showcase.png)[![Secondary Widget](./resources/dist/secondary-widget-showcase.png)](./resources/dist/secondary-widget-showcase.png)

You can also use the generic `theme()` method with enum or string values:

```
use Shkubu\FilamentWidgetTabs\Enums\WidgetTabTheme;

WidgetTab::make()
    ->theme(WidgetTabTheme::Success) // Using enum
```

#### Gradient Effects

[](#gradient-effects)

Add beautiful gradient backgrounds to your widget tabs:

```
WidgetTab::make()
    ->label('Premium Posts')
    ->value(Post::where('is_premium', true)->count())
    ->secondary()
    ->gradient() // Adds gradient effect
```

**Preview:**

[![Gradient Widget Showcase](./resources/dist/secondary-grandient-widget-showcase.png)](./resources/dist/secondary-grandient-widget-showcase.png)

#### Custom Theme Classes

[](#custom-theme-classes)

For advanced customization, you can add custom CSS classes:

```
WidgetTab::make()
    ->label('Custom Styled')
    ->value(100)
    ->customThemeClasses([
        'custom-shadow',
        'custom-border',
        'my-special-theme'
    ])

// Or use a closure for dynamic classes
WidgetTab::make()
    ->customThemeClasses(fn () => [
        'dynamic-class-' . now()->format('Y'),
        'user-role-' . auth()->user()->role
    ])
```

#### Available Themes

[](#available-themes)

- **Secondary**: Neutral gray theme for secondary content
- **Success**: Green theme for positive states and success messages
- **Warning**: Yellow/orange theme for warnings and attention
- **Danger**: Red theme for errors and critical states
- **Info**: Blue theme for informational content

### Extra Attributes

[](#extra-attributes)

Add extra HTML attributes to your widget tab:

```
WidgetTab::make()
    ->extraAttributes(['attribute' => 'value'])
```

### Query Modification

[](#query-modification)

Filter the resource table based on the selected tab:

```
WidgetTab::make()
    ->modifyQueryUsing(fn (Builder $query): Builder => $query->where('status', 'published'))
```

Or use the shorter `query()` method:

```
WidgetTab::make()
    ->query(fn (Builder $query): Builder => $query->where('status', 'published'))
```

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

Please review [our security policy](../../security/policy) on how to report security vulnerabilities.

Credits
-------

[](#credits)

- [Data Shkubuliani](https://github.com/shkubu18)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

43

—

FairBetter than 91% of packages

Maintenance71

Regular maintenance activity

Popularity31

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity49

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 96.8% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~27 days

Total

5

Last Release

189d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/17f277b9d220a7ec3d99045785d790697aaedc004ed86a8095609fe64e904fb0?d=identicon)[shkubu18](/maintainers/shkubu18)

---

Top Contributors

[![shkubu18](https://avatars.githubusercontent.com/u/105879471?v=4)](https://github.com/shkubu18 "shkubu18 (30 commits)")[![StfnSl](https://avatars.githubusercontent.com/u/18380190?v=4)](https://github.com/StfnSl "StfnSl (1 commits)")

---

Tags

filament-pluginfilamentphplaravelshkubufilament-widget-tabs

###  Code Quality

TestsPest

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/shkubu18-filament-widget-tabs/health.svg)

```
[![Health](https://phpackages.com/badges/shkubu18-filament-widget-tabs/health.svg)](https://phpackages.com/packages/shkubu18-filament-widget-tabs)
```

###  Alternatives

[stephenjude/filament-blog

Filament Blog Builder

20316.9k](/packages/stephenjude-filament-blog)[awcodes/filament-addons

A set of components / fields to extend Filament Admin.

3013.1k1](/packages/awcodes-filament-addons)[designthebox/barcode-field

225.8k](/packages/designthebox-barcode-field)[lara-zeus/tartarus

simple multi tenants

112.6k](/packages/lara-zeus-tartarus)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)
