PHPackages                             kanuni/filament-cards - 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. kanuni/filament-cards

ActiveFilament-plugin[Utility & Helpers](/categories/utility)

kanuni/filament-cards
=====================

v1.1(1mo ago)5110.3k↓53.6%9[2 issues](https://github.com/KanuniLab/filament-cards/issues)[1 PRs](https://github.com/KanuniLab/filament-cards/pulls)ISCPHPPHP ^8.2

Since Nov 15Pushed 1mo ago4 watchersCompare

[ Source](https://github.com/KanuniLab/filament-cards)[ Packagist](https://packagist.org/packages/kanuni/filament-cards)[ RSS](/packages/kanuni-filament-cards/feed)WikiDiscussions main Synced 2d ago

READMEChangelogDependencies (2)Versions (14)Used By (0)

[![Filament Cards Hero](./img/filament-cards-hero.png "Filament Cards Hero")](./img/filament-cards-hero.png)

Filament Cards Plugin
=====================

[](#filament-cards-plugin)

[![Latest Version on Packagist](https://camo.githubusercontent.com/029805a77927ae9d126a9143544ea84b268f6cbdf84325259ee961a8e8d1aa94/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6b616e756e692f66696c616d656e742d63617264732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/kanuni/filament-cards)[![License: ISC](https://camo.githubusercontent.com/8b10d8a5d16abbcc140073e9e3cdc080eaa2d52bc9838914f3e75ec4338e1c2a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4953432d626c75652e737667)](https://opensource.org/licenses/ISC)[![Total Downloads](https://camo.githubusercontent.com/86fe705aef8781304a2b1800d22c095a072dbe41f831fa86130bb3bd43f53f2f/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6b616e756e692f66696c616d656e742d63617264732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/kanuni/filament-cards)

- [Intro](#intro)
- [Screenshot](#screenshot)
- [Installation](#installation)
- [Creating a Cards Page](#creating-a-cards-page)
- [Dynamically Adding Card Items to the Cards Page](#dynamically-adding-card-items-to-the-cards-page)
- [Adding Custom Link as Card Item](#adding-custom-link-as-card-item)
- [Grouping Panel Items](#grouping-panel-items)
    - [Collapse Groups](#collapse-groups)
    - [Prevent Groups from Collapsing](#prevent-groups-from-collapsing)
- [Defining a Custom URL and/or Open Link in New Tab](#defining-a-custom-url-andor-open-link-in-new-tab)
- [Customizing the Display of Card Items](#customizing-the-display-of-card-items)
    - [Changing the Icon Size](#changing-the-icon-size)
    - [Inlining the Icon with the Card Title](#inlining-the-icon-with-the-card-title)
- [Configuring Breadcrumbs for Pages Opened from the Cards Page](#configuring-breadcrumbs-for-pages-opened-from-the-cards-page)

Intro
-----

[](#intro)

The Filament Cards plugin enables you to create a page containing cards. Card items can be other Filament pages or custom item with a link and can be organized into logical groups for easier navigation, if you have a lots of cards. Each card can have title, an icon and description. When Filament page is added as an item, the cards page automatically applied the page's title, icon and URL, although you can customize these properties as needed.

The best use case for this plugin would be application control panel or settings hub, where you can organize all of the application settings on one page.

Screenshot
----------

[](#screenshot)

[![Default cards layout](./img/default-view.png "Default layout")](./img/default-view.png)

Default view of the Cards Page with items organized into groups and displayed as individual cards

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

[](#installation)

Install the plugin using Composer:

```
composer require kanuni/filament-cards
```

For **Filament v3** version install 0.x version of the package:

```
composer require kanuni/filament-cards:^0.4
```

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

> **Note**If you have not set up a custom theme and are using a Panel follow the instructions in the [Filament Docs v3.x](https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme) first. Check it out here for [Filament Docs v4.x](https://filamentphp.com/docs/4.x/styling/overview#creating-a-custom-theme) and [Filament Docs v5.x](https://filamentphp.com/docs/5.x/styling/overview#creating-a-custom-theme). The following applies to both the Panels Package and the standalone Forms package.

### For Filament v4.x and v5.x

[](#for-filament-v4x-and-v5x)

Add the plugin's views directory to your `theme.css` file:

```
@source '../../../../app/Filament';
@source '../../../../resources/views/filament';

/* Add this to your theme.css */
@source '../../../../vendor/kanuni/filament-cards/resources/views';
```

### For Filament v3.x

[](#for-filament-v3x)

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

```
content: [
    './vendor/kanuni/filament-cards/resources/**/*.blade.php',
]
```

Rebuild the assets with `npm` command:

```
npm run build
```

Creating a cards page
---------------------

[](#creating-a-cards-page)

As an example, we will create a custom Filament page that will serve as an application control panel. Start by creating a Filament page at `App\Filament\Pages\ControlPanel.php`. Instead of extending the default Filament page class, this page should extend the `Kanuni\FilamentCards\Filament\Pages\CardsPage` class.

Additionally, we need to define a private static method, `getCards()`, which returns an array of `CardItem` objects.

```
namespace App\Filament\Pages;

use Kanuni\FilamentCards\Filament\Pages\CardsPage;
use Kanuni\FilamentCards\CardItem;
use App\Filament\Pages\CompanySettings;

class ControlPanel extends CardsPage
{
    protected static string|BackedEnum|null $navigationIcon = 'heroicon-o-cog-8-tooth';

    protected static function getCards(): array
    {
        return [
            CardItem::make(CompanySettings::class)
        ];
    }
}
```

In above example we added `CompanySettings` page as card item on our control panel page. The card item will inherit title and icon from that page. If you want to override that convention or add optional description you can use methods `title()`, `icon()` and `description()` on `CardItem` object.

Note that if the page provided to the card item belongs to a Filament resource, the title and icon will automatically be derived from the resource class.

Dynamically Adding Card Items to the Cards Page
-----------------------------------------------

[](#dynamically-adding-card-items-to-the-cards-page)

The `CardsPage` class includes a static `addCards()` method, allowing you to dynamically add card items to the page from outside the class. This is especially useful in modular applications or when building packages that need to register their own cards.

This means you can register additional cards for your ControlPanel page from a service provider, boot method, or another context, without modifying the class itself.

For example, in a service provider (like `AppServiceProvider` or a dedicated one), you can do:

```
use App\Filament\Pages\ControlPanel;
use Kanuni\FilamentCards\CardItem;
use App\Filament\Pages\UserManagement;

public function boot(): void
{
    // ControlPanel page extends CardsPage class
    ControlPanel::addCards([
        CardItem::make(UserManagement::class)
            ->title('User Accounts')
            ->icon('heroicon-o-users')
            ->description('Manage roles, permissions, and user accounts'),
    ]);
}
```

This allows better modularity, where each domain or feature can register its own card on the control panel, promoting separation of concerns.

You can also pass a Closure to the `title()`, `description()`, `icon()` and `url()` methods. This allows you to return values conditionally or dynamically. For example:

```
CardItem::make('/some/path')
    ->title(fn () => __('user-accounts.title'))
    ->icon(fn () => __('user-accounts.icon'))
    ->description(fn () => __('user-accounts.description')),
```

Adding Custom Link as Card Item
-------------------------------

[](#adding-custom-link-as-card-item)

You can add custom link as a card item by passing URL to CardItem's `make()` method. See following example:

```
use Kanuni\FilamentCards\CardItem;

protected static function getCards(): array
{
    return [
        CardItem::make('/path/to/docs')
            ->title('Documentation')
            ->icon('heroicon-o-document-text')
            ->description('Read the docs')
    ];
}
```

Grouping Panel Items
--------------------

[](#grouping-panel-items)

Organize card items into collapsible groups by using the `group()` method on a `CardItem` object:

```
use Kanuni\FilamentCards\CardItem;

protected static function getCards(): array
{
    return [
        CardItem::make(CompanySettings::class)->group('General')
    ];
}
```

The `group()` method now also accepts a Closure as the group name argument. This allows the group name to be lazily evaluated at render time:

```
use Kanuni\FilamentCards\CardItem;

protected static function getCards(): array
{
    return [
        CardItem::make(CompanySettings::class)
            ->group(fn () => __('company.group')),
    ];
}
```

### Collapse Groups

[](#collapse-groups)

By default, all groups on the card's page are expanded when you open the page. However, you can specify which groups should be collapsed initially. To do this, use the `$collapsedGroups` property on the card's page instance and pass an array of group names to be collapsed.

```
use Kanuni\FilamentCards\Filament\Page\CardsPage;

class ControlPanel extends CardsPage
{
    protected static array $collapsedGroups = ['General', 'Advanced'];

    protected static function getCards(): array
    {
        return [...];
    }
}
```

In this example, the "General" and "Advanced" groups will be collapsed by default, allowing users to expand them only when needed. This feature helps keep the page organized, especially when there are multiple groups containing lots of items.

If you need to conditionaly collapse some of the groups you can override `getCollapsedGroups()` on your page and return list of groups that should be collapsed, for example:

```
use Kanuni\FilamentCards\Filament\Page\CardsPage;

class ControlPanel extends CardsPage
{
    public function getCollapsedGroups(): array
    {
        if (auth()->user()->role !== 'admin') {
            // For non-admin users collapse 'Advanced' group
            return ['Advanced'];
        }

        return [];
    }
}
```

### Prevent Groups from Collapsing

[](#prevent-groups-from-collapsing)

You can control the collapse functionality for groups by overriding the protected static property `$disableGroupsCollapse`. This property can either be:

- A `bool`, to enable or disable collapsing for all groups
- An `array` of specific group names, to prevent only those groups from being collapsed

To completely disable the ability to collapse groups, set `$disableGroupsCollapse` to true:

```
use Kanuni\FilamentCards\Filament\Page\CardsPage;

class ControlPanel extends CardsPage
{
    // Disable collapsing for all groups
    protected static bool|array $disableGroupsCollapse = true;
}
```

To disable collapsing only for certain groups, define an `array` of group names:

```
use Kanuni\FilamentCards\Filament\Page\CardsPage;

class ControlPanel extends CardsPage
{
    // Disable collapsing for the 'General' group
    protected static bool|array $disableGroupsCollapse = ['General'];
}
```

Defining a Custom URL and/or Open Link in New Tab
-------------------------------------------------

[](#defining-a-custom-url-andor-open-link-in-new-tab)

By default, when your card item is a Filament page the card item uses that page's URL. However, you can specify a custom URL with the `url()` method on the `CardItem` object:

```
use Filament\FilamentCards\CardItem;

private static function getCards(): array
{
    return [
        CardItem::make(CompanySettings::class)
            // Override page URL
            ->url('https://www.google.com')
            // Will open link in new tab
            ->openInNewTab()
    ];
}
```

You can also use absolute URL's like in the above example. Optionally you can change to open the link in new browser tab using `openInNewTab()` method.

Customizing the Display of Card Items
-------------------------------------

[](#customizing-the-display-of-card-items)

By default, the content of each card item (title, icon, and description) is stacked and centered. Customize this alignment with the `$itemsAlignment` property on the card's page. The property must be an enum value from `Kanuni\FilamentCards\Enums\Alignment`. Possible values are `Alignment::Start`, `Alignment::Center` and `Alignment::End`.

```
use Kanuni\FilamentCards\Filament\Page\CardsPage;
use Kanuni\FilamentCards\Enums\Alignment;

class ControlPanel extends CardsPage
{
    // Change alignment of card's title, icon and description
    protected static Alignment $itemsAlignment = Alignment::Start;
}
```

[![Card items aligned to start](./img/align-start.png "Alignment of card items")](./img/align-start.png)

### Changing the Icon Size

[](#changing-the-icon-size)

You can customize the icon size by overriding `$iconSize` property on the card's page. This property must be value from the `Filament\Support\Enums\IconSize` enum. There are three sizes `IconSize::Small`, `IconSize::Medium` and `IconSize::Large`. Default size is medium.

```
use Kanuni\FilamentCards\Filament\Page\CardsPage;
use Filament\Support\Enums\IconSize;

class ControlPanel extends CardsPage
{
    // Change the size of card's icons
    protected static IconSize $iconSize = IconSize::Small;
}
```

### Inlining the Icon with the Card Title

[](#inlining-the-icon-with-the-card-title)

To display an item's icon inline with its title, override the `$iconInlined` property on the card's page.

```
use Kanuni\FilamentCards\Filament\Page\CardsPage;
use Filament\Support\Enums\IconSize;

class ControlPanel extends CardsPage
{
    // Inline the card's icon with title
    protected static bool $iconInlined = true;
}
```

In the screenshot below, the icons are aligned with the title and set to a small size.

[![Small icons inlined with the title](./img/inlined-small-icon.png "Small icons inlined with the title")](./img/inlined-small-icon.png)

Configuring Breadcrumbs for Pages Opened from the Cards Page
------------------------------------------------------------

[](#configuring-breadcrumbs-for-pages-opened-from-the-cards-page)

By default, pages opened from the cards page will display the standard breadcrumbs. If you want to customize the breadcrumbs for pages accessed through the cards page, you can add the `Kanuni\FilamentCards\Concerns\HasOriginBreadcrumb` trait in your page class.

```
namespace App\Filament\Pages;

use Filament\Pages\Page;
use Kanuni\FilamentCards\Concerns\HasOriginBreadcrumb;

class CompanySettings extends Page
{
    use HasOriginBreadcrumb;
}
```

When this trait is applied, the breadcrumbs will be set according to the card item, but only if the page is accessed from the card's page. This allows you to customize the navigation for card-related pages while keeping default behavior for other pages.

###  Health Score

53

—

FairBetter than 96% of packages

Maintenance89

Actively maintained with recent releases

Popularity39

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity59

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% 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 ~45 days

Recently: every ~62 days

Total

13

Last Release

51d ago

Major Versions

v0.4 → v1.02025-10-10

PHP version history (2 changes)v0.2.1PHP ^8.1

v1.1PHP ^8.2

### Community

Maintainers

![](https://www.gravatar.com/avatar/dd031cd81c7374a8794512037573edc2ab237d63b5b206fb745e7ec7582ca21d?d=identicon)[kanuni](/maintainers/kanuni)

---

Top Contributors

[![tjodalv](https://avatars.githubusercontent.com/u/2622065?v=4)](https://github.com/tjodalv "tjodalv (42 commits)")

### Embed Badge

![Health badge](/badges/kanuni-filament-cards/health.svg)

```
[![Health](https://phpackages.com/badges/kanuni-filament-cards/health.svg)](https://phpackages.com/packages/kanuni-filament-cards)
```

###  Alternatives

[ysfkaya/filament-phone-input

A phone input component for Laravel Filament

3161.3M25](/packages/ysfkaya-filament-phone-input)[stephenjude/filament-feature-flags

Filament implementation of feature flags and segmentation with Laravel Pennant.

122177.8k1](/packages/stephenjude-filament-feature-flags)[marcelweidum/filament-expiration-notice

Customize the livewire expiration notice

94135.4k5](/packages/marcelweidum-filament-expiration-notice)[crumbls/layup

A visual page builder plugin for Filament 5 — Divi-style grid layouts with extensible widgets.

592.7k1](/packages/crumbls-layup)[eduardoribeirodev/filament-leaflet

Um widget de mapa para FilamentPHP.

2118.9k](/packages/eduardoribeirodev-filament-leaflet)[rawilk/profile-filament-plugin

Profile & MFA starter kit for filament.

3914.6k](/packages/rawilk-profile-filament-plugin)

PHPackages © 2026

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