Download the PHP package irajul/filament-shadcn-theme without Composer

Filament Shadcn Theme

A configurable shadcn-inspired theme plugin for Filament v5 panels.

The package maps shadcn-style tokens onto Filament's generated HTML, so it can theme navigation, topbar, cards, forms, tables, pagination, checkboxes, empty states, modals, dropdowns, widgets, and light/dark mode without requiring a Vite asset build.

Features

• Filament v5 panel plugin with Laravel package auto-discovery.
• shadcn-inspired color, radius, font, menu, sidebar, chart, and surface tokens.
• Light and dark token output with optional panel theme-mode helpers.
• Inline CSS by default, with an optional cached asset mode for production panels.
• Package-local Pest and Testbench coverage, so the package can be tested without a host app.

Requirements

• PHP 8.3 or higher
• Laravel 12 or 13
• Filament 5

Installation

Install the package with Composer:

The package is auto-discovered by Laravel. Register the plugin on each Filament panel that should use the theme.

Defaults

The default package look is intentionally sharp and shadcn-like:

You may change defaults in config/filament-shadcn-theme.php, or override them fluently in the panel provider.

Configuration Options

Style

Controls density, spacing, table rhythm, sidebar spacing, card padding, and radius personality.

Available values:

String values: vega, nova, maia, lyra, mira, luma, sera.

Base Color

Controls neutral surfaces, borders, text, sidebar background, muted text, and table backgrounds.

Available values:

String values: neutral, stone, zinc, mauve, olive, mist, taupe.

Theme Color

Controls primary buttons, active navigation, focus rings, and primary accents.

Available values:

String values: neutral, stone, zinc, mauve, olive, mist, taupe, amber, blue, cyan, emerald, fuchsia, green, indigo, lime, orange, pink, purple, red, rose, sky, teal, violet, yellow.

Chart Color

Controls --chart-* tokens. If omitted, the chart palette follows theme_color.

Font And Heading Font

Controls the generated --font-sans and --font-heading tokens. The panel font is also applied through Filament by default.

Built-in font keys:

Any custom font family string is accepted:

Use heading_font => inherit or ->headingFont('inherit') to keep headings on the body font stack.

Radius

Controls shadcn radius tokens and component corners.

Available values:

String values: default, none, small, medium, large.

For the sharp Lyra look, use Radius::None.

Icon Library

Currently stored as a CSS metadata token so the same config can support icon-library-specific styling later.

Available values:

String values: lucide, heroicons, tabler, phosphor, radix.

CSS Mode

Controls how generated CSS is delivered.

Available values:

String values: inline, cached-asset.

inline injects a generated <style> tag into the Filament panel and is the default because it requires no writable public directory. cached-asset writes a hashed stylesheet to public/vendor/filament-shadcn-theme and injects a <link> tag instead.

You can warm or clear cached CSS assets from Artisan:

Menu Color

Controls sidebar color treatment.

Available values:

String values: default, inverted, default-translucent, inverted-translucent.

Menu Accent

Controls active navigation intensity.

Available values:

String values: subtle, bold.

Sidebar Variant

Controls sidebar offset, border, radius, and shadow.

Available values:

String values: sidebar, floating, inset.

Surface Shadow

Controls shared panel and floating surface shadow tokens.

Available values:

String values: none, xs, sm, md.

Advanced Overrides

Use token overrides when you want to change shadcn tokens directly.

Use style variables for layout and density adjustments.

Use selector overrides if your Filament build or custom plugin outputs a different class.

Config File Example

After publishing config, edit config/filament-shadcn-theme.php:

Then register the plugin with no extra arguments:

Testing The Package

Package tests live inside this package, not in the host Laravel app.

The tests are intentionally standalone. They exercise configuration hydration, fluent plugin configuration, shadcn token rendering, Filament selector coverage, light/dark token output, and the exposed option enums without relying on a host application's test case.

Contributing

Issues and pull requests are welcome. Please read CONTRIBUTING.md before opening larger changes so setup, tests, and release expectations stay predictable.

Security

Please do not open public issues for suspected vulnerabilities. Follow the private reporting process in SECURITY.md.

Releasing

Before tagging a release:

Then create the GitHub release and publish the tag to Packagist. Packagist reads versions from Git tags, so keep the version field out of composer.json.

For Packagist, submit the public GitHub repository URL once and enable the Packagist GitHub hook or application sync. No GitHub Action is required for Packagist updates; the hook updates the package when tags are pushed.

Notes

• Keep composer.json package metadata updated before publishing.
• Confirm the final Composer package name before tagging the first release.
• The package does not ship compiled assets. It injects generated CSS through Filament's panel render hook.
• Register the plugin per panel if your app has multiple Filament panels.