PHPackages                             robyconte/filament-italia - 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. [Admin Panels](/categories/admin)
4. /
5. robyconte/filament-italia

ActiveLibrary[Admin Panels](/categories/admin)

robyconte/filament-italia
=========================

Filament admin panel theme based on the .italia Design System by AGID

v1.1.0(yesterday)00MITCSSPHP ^8.2

Since Jun 8Pushed yesterdayCompare

[ Source](https://github.com/RoBYCoNTe/filament-italia)[ Packagist](https://packagist.org/packages/robyconte/filament-italia)[ RSS](/packages/robyconte-filament-italia/feed)WikiDiscussions main Synced yesterday

READMEChangelog (2)Dependencies (2)Versions (3)Used By (0)

Filament Italia
===============

[](#filament-italia)

A [Filament](https://filamentphp.com) v5 admin panel theme based on the [**.italia Design System**](https://designers.italia.it/design-system/) by [AGID](https://www.agid.gov.it/) (Agenzia per l'Italia Digitale).

Applies the official Italian public administration visual identity — colors, typography, border radii, and component styling — to any Filament panel, with zero npm dependencies and no Blade view overrides.

Requirements
------------

[](#requirements)

- PHP 8.2+
- Laravel 11+
- Filament 5.x
- Tailwind CSS 4.x (via Vite)
- Node.js (for `npm run build`)

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

[](#installation)

```
composer require robyconte/filament-italia
php artisan filament-italia:install
npm run build
```

The install command publishes the config file and a ready-to-use theme CSS entry point to `resources/css/filament-italia/theme.css`.

### Panel Provider

[](#panel-provider)

Use `FilamentItaliaTheme::applyTo()` in your `PanelProvider` to apply the theme with a single call:

```
use RoBYCoNTe\FilamentItalia\FilamentItaliaTheme;

public function panel(Panel $panel): Panel
{
    return FilamentItaliaTheme::applyTo(
        $panel
            ->id('admin')
            ->path('admin')
            ->discoverResources(in: app_path('Filament/Admin/Resources'), for: 'App\Filament\Admin\Resources')
            ->discoverPages(in: app_path('Filament/Admin/Pages'), for: 'App\Filament\Admin\Pages')
            ->middleware([
                // ...
            ])
    );
}
```

`applyTo()` automatically configures:

- Theme CSS entry point (`->viteTheme()`)
- Primary color from config (`->colors()`)
- Light mode only (`->darkMode(false)`)
- Self-hosted fonts: Titillium Web, Roboto Mono, Lora (`->font()`, `->monoFont()`, `->serifFont()`)

### Advanced: Custom Theme CSS

[](#advanced-custom-theme-css)

If you need to add custom `@source` directives or override specific styles, publish the theme CSS and edit it:

```
php artisan vendor:publish --tag=filament-italia-theme
```

Then edit `resources/css/filament-italia/theme.css` and add your customizations after the package imports.

Configuration
-------------

[](#configuration)

Publish the config file:

```
php artisan vendor:publish --tag=filament-italia-config
```

### Primary Color

[](#primary-color)

The default primary color is **Blu Italia** (`#0066cc`), the official color for national-level Italian public administration services.

You can customize it in two ways:

**Via `.env` (recommended):**

```
FILAMENT_ITALIA_PRIMARY_COLOR=#0066cc
```

**Via config file (`config/filament-italia.php`):**

```
'primary_color' => '#0066cc',
```

The package automatically generates a full 11-shade palette (50–950) from any hex color using HSL interpolation.

> For local or territorial public services, AGID recommends using a dedicated primary color. See the [AGID color guidelines](https://designers.italia.it/design-system/fondamenti/colori/).

What's Included
---------------

[](#whats-included)

### Typography

[](#typography)

FontUsageWeights**Titillium Web**Body text, UI elements, headings200, 300, 400, 600, 700 + italic 400**Lora**Serif (long-form reading)400, 700 + italic 400**Roboto Mono**Monospace (code, data)400, 500All fonts are **self-hosted** — no external CDN dependency. Font files are processed by Vite at build time.

### Color Tokens

[](#color-tokens)

Full AGID-aligned color scales (11 shades each: 50–950):

TokenBase ColorUse`primary`Blu Italia `#0066cc`Interactive elements, links, active states`danger`Red `#cc334d`Errors, destructive actions`success`Emerald `#008055`Confirmations, positive states`warning`Orange `#cc7a00`Warnings, alerts`info`Slate `#5c6f82`Informational messages`gray`Neutral `#262626`Text, borders, backgrounds### Component Overrides

[](#component-overrides)

The theme overrides Filament's default component styling via un-layered CSS rules (which always beat Filament's `@layer components`):

Component AreaOverride Details**Topbar**Primary blue background, white text/icons, ring removal**Sidebar**Dark blue (`primary-800`) background, white text, custom scrollbar**Buttons**`font-weight: 600`, `:active` state, no shadow on outlined, 150ms transition**Tabs**AGID underline style (flat, no card), full-width, left-aligned**Links**Primary color instead of gray**Inputs**AGID `border-radius: 4px`**Tables**Bold headers with 2px bottom border**Modals**`border-radius: 8px` (from Filament's 12px)**Pagination**Active page with `bg-primary-50`**Form editors**Toolbar border-radius matching inputs**Dropdowns**Tighter `border-radius: 4px`**Notifications**`border-radius: 8px`**Stats widgets**`border-radius: 8px`**Empty states**Primary-tinted icon background**Breadcrumbs**Primary color on hover**Badges**Light-on-dark styling in sidebar**Focus indicators**White outline on dark backgrounds (WCAG 2.4.7)Architecture
------------

[](#architecture)

```
resources/css/
├── fonts.css       # @font-face declarations (self-hosted woff2)
├── theme.css       # @theme inline block — AGID color/radius/font tokens
└── overrides.css   # Un-layered component overrides

resources/fonts/    # Self-hosted woff2 font files (11 files)

```

### CSS Cascade Strategy

[](#css-cascade-strategy)

1. `fonts.css` — `@font-face` declarations (no layer)
2. Tailwind CSS base layer
3. Filament theme CSS — all components in `@layer components`
4. `theme.css` — `@theme inline` overrides Tailwind's theme tokens
5. `overrides.css` — **un-layered** rules, always win over `@layer components`

This means overrides never need `!important`. Doubled selectors (e.g. `.fi-topbar.fi-topbar`) provide extra specificity insurance.

Limitations
-----------

[](#limitations)

- **Light mode only** — the AGID .italia design system does not define a dark mode palette.
- **No npm dependency** — all styling is pure CSS. No JavaScript runtime impact.
- **No Blade overrides** — the theme works entirely through CSS, preserving Filament's component structure for future compatibility.

Credits
-------

[](#credits)

- [AGID — Agenzia per l'Italia Digitale](https://www.agid.gov.it/)
- [.italia Design System](https://designers.italia.it/design-system/)
- [Filament PHP](https://filamentphp.com)

License
-------

[](#license)

[MIT](LICENSE)

###  Health Score

40

—

FairBetter than 86% of packages

Maintenance100

Actively maintained with recent releases

Popularity0

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity47

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 66.7% 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 ~0 days

Total

2

Last Release

1d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/11538715d65e8ed03fe2abbb2242760aff43debe2b85cf8dce94e37e4b8f7251?d=identicon)[RoBYCoNTe](/maintainers/RoBYCoNTe)

---

Top Contributors

[![RoBYCoNTe](https://avatars.githubusercontent.com/u/2301162?v=4)](https://github.com/RoBYCoNTe "RoBYCoNTe (2 commits)")[![rconterosito](https://avatars.githubusercontent.com/u/261887272?v=4)](https://github.com/rconterosito "rconterosito (1 commits)")

---

Tags

laravelthemefilamentpaagiditalia-design-system

### Embed Badge

![Health badge](/badges/robyconte-filament-italia/health.svg)

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

###  Alternatives

[awcodes/filament-quick-create

Plugin for Filament Admin that adds a dropdown menu to the header to quickly create new items.

249203.6k11](/packages/awcodes-filament-quick-create)[rawilk/profile-filament-plugin

Profile & MFA starter kit for filament.

3913.7k](/packages/rawilk-profile-filament-plugin)[mradder/filament-logger

Audit logging, activity tracking, exports, alerts, and dashboards for Filament admin panels.

2210.5k](/packages/mradder-filament-logger)[stephenjude/filament-jetstream

A Laravel starter kit built with Filament inspired by Jetstream.

17758.9k2](/packages/stephenjude-filament-jetstream)[stephenjude/filament-two-factor-authentication

Filament Two Factor Authentication: Google 2FA + Passkey Authentication

84192.9k7](/packages/stephenjude-filament-two-factor-authentication)[guava/filament-knowledge-base

A filament plugin that adds a knowledge base and help to your filament panel(s).

207140.2k1](/packages/guava-filament-knowledge-base)

PHPackages © 2026

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