FilaFly

Requirements

PHP 8.1+
Filament v3
Tailwind v3

Purchase & Activation

You can buy Lucent 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!

activation

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

Installation

1. Add the Repository

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

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

2. Install the Package

Install the package via Composer:

composer require filafly/lucent

You will be prompted to provide your username and password.

Loading composer repositories with package information
Authentication required (lucent.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: nolan@filafly.com
License key: 8c21df8f-6273-4932-b4ba-8bcc723ef500
Activation fingerprint: filafly.com

Loading composer repositories with package information
Authentication required (lucent.composer.sh):
Username: [nolan@filafly.com]
Password: [8c21df8f-6273-4932-b4ba-8bcc723ef500:filafly.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/lucent/resources/css/index.css';

4. Add to Your Panel

Now you'll tell your Filament panel about the custom theme file and register a plugin for Lucent. 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\Lucent\LucentTheme;

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

Note: You can easily override Lucent's configuration by placing additional style configurations after the plugin registration, as the last style configuration called will take precedence.

Customization

Disabling the Suggested Font

By default, Lucent applies the Figtree font to your Filament panel for optimal visual consistency. If you prefer to use your own font or keep your existing font configuration, you can disable this behavior using the withoutSuggestedFont() method:

use Filafly\Themes\Lucent\LucentTheme;

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

When this method is called, Lucent will not override your panel's font configuration, allowing you to maintain full control over typography.

Disabling the Suggested Icons

Lucent includes Phosphor Icons with a duotone style by default to enhance the visual experience. These icons are carefully selected and styled to complement the theme's design. If you prefer to use different icons or maintain your existing icon configuration, you can disable this feature using the withoutSuggestedIcons() method:

use Filafly\Themes\Lucent\LucentTheme;

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