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.0(7mo ago)519.0k↓15.2%7[3 issues](https://github.com/KanuniLab/filament-cards/issues)ISCPHPPHP ^8.1

Since Nov 15Pushed 7mo 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 1mo ago

READMEChangelogDependencies (1)Versions (13)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). The following applies to both the Panels Package and the standalone Forms package.

### For Filament v4.x

[](#for-filament-v4x)

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

45

—

FairBetter than 93% of packages

Maintenance63

Regular maintenance activity

Popularity38

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity54

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 ~30 days

Total

12

Last Release

220d ago

Major Versions

v0.4 → v1.02025-10-10

### 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 (39 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

[guava/calendar

Adds support for vkurko/calendar to Filament PHP.

298241.0k3](/packages/guava-calendar)[pxlrbt/filament-environment-indicator

Indicator for the current environment inside Filament

151923.9k12](/packages/pxlrbt-filament-environment-indicator)[pboivin/filament-peek

Full-screen page preview modal for Filament

253319.6k12](/packages/pboivin-filament-peek)[bezhansalleh/filament-google-analytics

Google Analytics integration for FilamentPHP

205144.8k5](/packages/bezhansalleh-filament-google-analytics)[dotswan/filament-map-picker

Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications.

124139.3k2](/packages/dotswan-filament-map-picker)[stephenjude/filament-feature-flags

Filament implementation of feature flags and segmentation with Laravel Pennant.

118126.9k](/packages/stephenjude-filament-feature-flags)

PHPackages © 2026

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