How to use custom Admin UI with Filament
Hello guys.
II've been with Laravel for a year or so and I love it so far. So is with Livewire which surprised me with it's simplicity in many occasions in terms of dynamics and code easiness to digest. I've came across Filament in a few months so I am still learning my way through this incredible ecosystem but I feel comfortable now thanks to tuto and many other contributors to build a semi-complex project on my own.
The one thing that I would like to know and I've done some research on it already is how can we build a fully customized admin theme still using Filament under the hood. And by fully customized theme I am not meaning to change colors, backgrounds, icons etc. that Filament already allow with the custom theme, but what I mean is to use the incredible power to build quickly with Filament but use a custom ADMIN UI like AdminLTE, CoreUI or any other admin design that a project requires us to use.
And yes, that would mean to change many templates etc. but maybe this would be an extended theme or whatever it is called, as otherwise if we all use the default Filament, one day all web admins will look identical and a bit boring for that matter.
Any ideas, suggestions or directions are more than welcome.
P.S. I've seen some people talking about Filament with Bootstrap 5 etc. so if they succeeded to swap the Tailwind with BS I guess there is always a way, just not aware how hard it is and what is the optimal approach to start my ressearch in that direction...
Solution:Jump to solution
Another alternative I was reading about was to have custom PAGES which we can design and if allowed to use the functionality of Filament, can have our content attached. Not sure yet of all the bits and pieces, but there has to be an easy and elegant way to implement your custom theme to Filament panel. I can imagine someone requesting you to work on a project and providing frontend/backend design so that we can attach the functionality required and we tell that our panel does not support the custom GUI 🙂
I am sure it does, I just did not yet find it as I really love to use Filament and just need to invest some extra time in finding which template is where by design. I think that once I am done with the Vet clinic (or when the class is done with it) I can start by login/register form etc. and go slowly finding all the others, documenting their locations and think of a way or replacement that can be independent of the web framework.
Maybe I am a dreamer but I am pretty sure if there is not a simple way to achieve the needed, there is a smart way to do so and the simple way is already in the DEV team minds....
3 Replies
I don't know about bootstrap themed panels, but I've been toying with the idea of starting with a bare bones TALL stack preset and add Filament elements, like a table or a form.
https://github.com/laravel-frontend-presets/tall
GitHub
GitHub - laravel-frontend-presets/tall: A TALL (Tailwind CSS, Alpin...
A TALL (Tailwind CSS, Alpine.js, Laravel and Livewire) Preset for Laravel - GitHub - laravel-frontend-presets/tall: A TALL (Tailwind CSS, Alpine.js, Laravel and Livewire) Preset for Laravel
Solution
Another alternative I was reading about was to have custom PAGES which we can design and if allowed to use the functionality of Filament, can have our content attached. Not sure yet of all the bits and pieces, but there has to be an easy and elegant way to implement your custom theme to Filament panel. I can imagine someone requesting you to work on a project and providing frontend/backend design so that we can attach the functionality required and we tell that our panel does not support the custom GUI 🙂
I am sure it does, I just did not yet find it as I really love to use Filament and just need to invest some extra time in finding which template is where by design. I think that once I am done with the Vet clinic (or when the class is done with it) I can start by login/register form etc. and go slowly finding all the others, documenting their locations and think of a way or replacement that can be independent of the web framework.
Maybe I am a dreamer but I am pretty sure if there is not a simple way to achieve the needed, there is a smart way to do so and the simple way is already in the DEV team minds.
The one and only I can think is using custome page.