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. [Utility & Helpers](/categories/utility) 4. / 5. shkubu18/filament-widget-tabs ActiveLibrary[Utility & Helpers](/categories/utility) shkubu18/filament-widget-tabs ============================= Widget Tabs are modified version of Filament Tabs to display it as a widgets. v1.0.4(8mo ago)242.6k—0%1[2 issues](https://github.com/shkubu18/filament-widget-tabs/issues)MITPHPPHP ^8.1CI passing Since May 26Pushed 6mo 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 1mo ago 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 41 — FairBetter than 89% of packages Maintenance64 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 242d 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 [guava/calendar Adds support for vkurko/calendar to Filament PHP. 298241.0k3](/packages/guava-calendar)[bezhansalleh/filament-google-analytics Google Analytics integration for FilamentPHP 205144.8k5](/packages/bezhansalleh-filament-google-analytics)[jibaymcs/filament-tour Bring the power of DriverJs to your Filament panels and start a tour ! 12247.8k](/packages/jibaymcs-filament-tour)[marcelweidum/filament-expiration-notice Customize the livewire expiration notice 9169.0k4](/packages/marcelweidum-filament-expiration-notice)[hydrat/filament-table-layout-toggle Filament plugin adding a toggle button to tables, allowing user to switch between Grid and Table layouts. 6292.3k1](/packages/hydrat-filament-table-layout-toggle)[outerweb/filament-settings Filament integration for the outerweb/settings package 3690.9k4](/packages/outerweb-filament-settings) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)