README

FilaCraft

The ultimate theming & customization toolkit for Filament admin panels.

About

FilaCraft transforms your Filament admin panel into a fully customizable, visually stunning experience. It provides a built-in theme customization page where each user can personalize their panel — from layout presets and color palettes to fonts, spacing, table styles, and more. All settings are persisted per user, so every team member gets their own look and feel.

Theme Presets

FilaCraft ships with 5 professionally designed theme presets, each with its own layout and aesthetic:

Akdeniz Ruhu Soft pastel tones with rounded corners	Atlas Layered surfaces with premium elevation
Ege Esintisi Classic sidebar layout with clean lines	Gün Batımı Warm sunset tones with expressive styling
Kutup Işığı Top navigation with frosted glass effect

Features

Theming & Layout

5 Theme Presets — Each preset transforms the entire panel layout, sidebar, topbar, and overall aesthetic
Top Navigation Support — The "Kutup Işığı" preset automatically switches to a top navigation layout
Frosted Glass Effects — Backdrop blur and translucent surfaces for a modern look

Color & Typography

13 Color Palettes — Turquoise, Ocean, Emerald, Violet, Rose, Amber, Indigo, Slate, Cyan, Fuchsia, Red, Lime, Sky
OKLCH Color Space — Every palette includes precise shade variations from 50 to 950
Google Fonts Integration — Pick any Google Font family; weights are loaded dynamically

UI Customization

Border Radius — Sharp, Small, Default, or Large
Density / Spacing — Compact, Default, or Comfortable
Table Styles — Default, Striped, Bordered, or Minimal
Card Styles — Default, Flat, Raised, or Bordered
Error Page Styles — Default, Minimal, Illustrated, or Gradient (for 403, 404, 500 pages)

Per-User Persistence

Settings stored in the database per user
Instant sync via localStorage for zero-latency UI updates
Automatic fallback to database when localStorage is empty

Developer Experience

One-command installer — Registers the plugin, publishes assets, runs migrations
Filament 4 & 5 compatible
Multi-language support — Turkish & English built-in
Zero configuration required — Works out of the box after install

Requirements

Requirement	Version
PHP	8.2+
Laravel	11+
Filament	4.x or 5.x

Installation

1. Install via Composer

composer require slym758/filacraft

2. Run the installer

php artisan filacraft:install

The installer will automatically:

Register FilaCraftPlugin in your AdminPanelProvider
Add the required CSS import and @source directive to your theme file
Publish custom error page views (403, 404, 500)
Run the database migration to create the user_theme_settings table

3. Build your assets

npm run build

That's it — you're ready to go.

Usage

Once installed, a "Themes" menu item appears in the user menu (bottom-left corner of your panel). Clicking it opens the full customization page where users can:

Select a theme preset — Preview and apply any of the 5 built-in themes
Choose a primary color — Pick from 13 carefully crafted color palettes
Set a font — Search and apply any Google Font
Adjust border radius — From sharp edges to pill-shaped corners
Control density — Compact, default, or comfortable spacing
Style tables — Striped rows, bordered cells, or minimal headers
Style cards — Flat, raised, or bordered sections
Customize error pages — Choose from 4 different error page designs
Switch language — Toggle between Turkish and English

All changes are applied instantly with no page reload and persisted to the database automatically.

How It Works

User selects theme → JavaScript applies CSS classes & data attributes → Settings saved to localStorage + database
                                                                          ↓
                                            Next page load → Read from localStorage (instant) → Fallback to DB API

CSS data attributes (data-radius, data-density, data-table-style, data-card-style) control styling
CSS custom properties set the primary color shades dynamically
Middleware handles layout switching (e.g., top navigation for Kutup Işığı)
Google Fonts are loaded dynamically via <link> injection

API Endpoints

FilaCraft exposes the following authenticated API routes:

Method	Endpoint	Description
`GET`	`/api/theme-settings`	Retrieve current user's settings
`POST`	`/api/theme-settings`	Save/update user's settings
`DELETE`	`/api/theme-settings`	Reset user's settings to default

Customization Options Reference

Theme Presets

Key	Name	Description
`ege`	Ege Esintisi	Classic sidebar layout, clean and minimal
`akdeniz`	Akdeniz Ruhu	Pastel tones, rounded corners, shadow effects
`kutup`	Kutup Işığı	Top navigation, gradient background, glass effect
`atlas`	Atlas	Layered surfaces, premium shadows, silk feel
`gunbatimi`	Gün Batımı	Warm color temperature, expressive borders

Color Palettes

turquoise · ocean · emerald · violet · rose · amber · indigo · slate · cyan · fuchsia · red · lime · sky

Border Radius

Key	Style
`sharp`	Minimal rounding (0.25rem)
`small`	Subtle rounding (0.5–0.75rem)
`default`	Standard rounding (1–2rem)
`large`	Extra round / pill shapes (9999px)

Density

Key	Style
`compact`	Tight spacing, minimal padding
`default`	Standard spacing
`comfortable`	Extra breathing room

Table Styles

Key	Style
`default`	Standard table appearance
`striped`	Alternating row backgrounds
`bordered`	Visible cell borders
`minimal`	Clean, borderless, uppercase headers

Card Styles

Key	Style
`default`	Standard card styling
`flat`	No shadow, minimal look
`raised`	Prominent shadow (elevated)
`bordered`	Border-focused styling

Error Page Styles

Key	Style
`default`	Standard error design
`minimal`	Clean, text-focused
`illustrated`	Visual design with illustrations
`gradient`	Gradient background effects

Database Structure

FilaCraft creates a single user_theme_settings table:

user_theme_settings
├── id
├── user_id (foreign key → users, unique, cascade on delete)
├── settings (JSON)
├── created_at
└── updated_at

The settings JSON stores all user preferences in a single field for efficient read/write operations.

Troubleshooting

Theme not applying after install?

Make sure you rebuilt your frontend assets:

npm run build

Plugin not registered?

The installer auto-registers the plugin, but you can also add it manually in your AdminPanelProvider:

use Slym758\FilaCraft\FilaCraftPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->plugins([
            FilaCraftPlugin::make(),
        ]);
}

Styles not loading?

Ensure your theme CSS file includes the FilaCraft import. The installer adds this automatically, but you can verify it exists in your resources/css/filament/admin/theme.css:

@import '/vendor/slym758/filacraft/resources/css/theme.css';
@source '/vendor/slym758/filacraft/resources/**/*.php';

Changelog

Please see CHANGELOG for more information on what has changed recently.

License

The MIT License (MIT). Please see License File for more information.

Built with care for the Filament community.

slym758 / filament-filacraft-theme

Maintainers

Package info

Statistics

Security