Citrus

Launch price: $39 Standard and $99 Unlimited (normally $59 and $149), until November 6, 2026 at 11:59 PM CT.

Requirements

• PHP 8.2+
• Filament v4 or v5 (v5 uses Livewire v4)
• Tailwind v4

Purchase & Activation

You can buy Citrus here. Once you have completed the checkout, you'll receive your license key and you will be prompted to activate your theme by entering the domain you intend to use for your production environment. You will not be able to install the theme if you have not activated it!

If you missed this step, you should be able to access it by finding the email with your license key and clicking the "Get started with Citrus" button.

Installation

1. Add the Repository

Once you have purchased Citrus, add the private repository to your composer.json:

composer config repositories.citrus composer https://citrus.composer.sh

2. Install the Package

Install the package via Composer. The same command works for Filament v4 and v5:

composer require filafly/citrus

You will be prompted to provide your username and password.

Loading composer repositories with package information
Authentication required (citrus.composer.sh):
Username: [email]
Password: [key:domain]

The username will be your email address and the password will be equal to your license key. You will also need to include the domain name of your project by appending it to the key with a colon (:). Take the following instance for example:

• Contact email: you@example.com
• License key: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
• Activation fingerprint: example.com

Loading composer repositories with package information
Authentication required (citrus.composer.sh):
Username: [you@example.com]
Password: [xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:example.com]

It is recommended to store the credentials when asked.

3. Create a custom theme

To ensure that Filament is aware of the styling changes, we must setup a new custom theme.

php artisan make:filament-theme

Once you've created your theme, you'll need to replace the existing import at the top of the file.

@import '../../../../vendor/filafly/citrus/resources/css/theme.css'; /* Filament v4 and v5 */

Rebuild your assets so the panel picks up the new styles (or keep npm run dev running):

npm run build

4. Add to Your Panel

Now you'll tell your Filament panel about the custom theme file and register a plugin for Citrus. If we assume your custom theme was created for an "admin" panel, you would make the following method calls in the panel provider:

use Filafly\Themes\Citrus\CitrusTheme;

public function panel(Panel $panel): Panel
{
    return $panel
        // ... other configuration
        ->viteTheme('resources/css/filament/admin/theme.css')
        ->plugin(CitrusTheme::make());
}

Citrus removes the top bar: the logo, search and user menu move into the sidebar, and each page gets a sticky glass header.

Customization

Citrus suggests a violet and neutral palette, the Google Sans Flex and Google Sans Code fonts, and the Hugeicons icon set. Keep your own by opting out of any of them:

CitrusTheme::make()
    ->withoutSuggestedColors()
    ->withoutSuggestedFont()
    ->withoutSuggestedIcons();

Screenshots

Dashboard

License

This is a commercial product. Your license grants you the right to use this theme according to the terms of your purchase through Anystack.sh.