You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: Featuring a clean design with less rounding, lighter backgrounds, and restyled UI components.
8
8
github_repository: filamentphp/minimal-theme
9
9
has_dark_theme: true
10
10
has_translations: true
11
-
is_lemon_squeezy_embedded: true
12
11
price: €49.00
13
12
versions: [3]
14
13
publish_date: 2023-09-05
15
14
---
16
15
17
-
Want your Filament applications to look more streamlined? The official Filament Minimal Theme features a clean design with less rounding, a lighter background and redesigned UI components. No need to hire a designer to make your projects look different from the default Filament style. Simply install our Composer package and you're good to go. Perfect for corporate software.
16
+
Want your Filament apps to look more streamlined? The official Minimal theme features a clean design with less rounding, lighter backgrounds, and restyled UI components. No need to hire a designer to make your projects look different from the default Filament style. Simply install the Composer package and you’re good to go.
18
17
19
-
> This theme covers all Filament packages and can be used standalone. You may choose a license for a single project (3 activations) or unlimited projects, both including free updates.
18
+
[Visit the theme website to learn more.](https://whizzy.dev/themes/minimal?utm_source=filament&utm_medium=referral&utm_campaign=plugin&utm_content=introduction)
20
19
21
20
## Screenshots
22
21
23
-
List orders page in light mode using the Filament Minimal Theme:
24
-
25
-
26
-
List orders page in light mode using the default Filament theme:
27
-
28
-
29
-
List orders page in dark mode using the Filament Minimal Theme:
30
-
31
-
32
-
List orders page in light mode using the default Filament theme:
33
-
34
-
35
-
Edit post page in light mode using the Filament Minimal Theme:
36
-
37
-
38
-
Edit post page in light mode using the default Filament theme:
39
-
40
-
41
-
Edit post page in dark mode using the Filament Minimal Theme:
42
-
43
-
44
-
Edit post page in dark mode using the default Filament theme:
45
-
46
-
47
-
Registration page in light mode using the Filament Minimal Theme:
48
-
49
-
50
-
Registration page in light mode using the default Filament theme:
51
-
52
-
53
-
Registration page in dark mode using the Filament Minimal Theme:
54
-
55
-
56
-
Registration page in dark mode using the default Filament theme:
57
-
22
+
Visit the Whizzy website to view [screenshots of the Filament Minimal Theme](https://whizzy.dev/themes/minimal?utm_source=filament&utm_medium=referral&utm_campaign=plugin&utm_content=screenshots) and compare it with the default Filament theme.
58
23
59
24
## Installation
60
25
61
-
### Requirements
62
-
63
-
This plugin requires the latest version of Filament v3, as it depends on new APIs added to Filament's core.
64
-
65
-
### Installation
66
-
67
-
Filament Minimal Theme can be installed using our private Composer repository. Configure the repository in your application's `composer.json` file by running:
You will be prompted to provide a username and password. Use your order email address as username and the license key you received as password.
80
-
81
-
### Panels
82
-
83
-
#### Stylesheet
84
-
85
-
To start using the Minimal Theme with the Filament Panel Builder, you need to [create a custom theme](https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme).
86
-
87
-
Next, replace the imported Panel Builder stylesheet with the Minimal Theme stylesheet in your theme CSS file:
If you're using Filament packages outside the Panel Builder, you may install the Minimal Theme using the following steps.
125
-
126
-
First, make sure you've properly installed any Filament packages. Your project should have a Tailwind CSS config file that extends the Filament preset, a stylesheet (e.g. `resources/css/app.css`), and a layout view that renders `@filamentStyles`.
127
-
128
-
#### Stylesheet
129
-
130
-
In your app CSS file, import the Minimal Theme stylesheets for the Filament packages you're using:
Note that some packages depend on other Filament packages, so you need to make sure to import the stylesheets of all dependencies. Here's the list of packages with their dependencies:
147
-
148
-
- Actions
149
-
- Forms
150
-
- Infolists
151
-
- Notifications
152
-
- Support
153
-
- Forms
154
-
- Actions
155
-
- Infolists
156
-
- Notifications
157
-
- Support
158
-
- Infolists
159
-
- Actions
160
-
- Forms
161
-
- Notifications
162
-
- Support
163
-
- Notifications
164
-
- Actions
165
-
- Support
166
-
- Support
167
-
- Tables
168
-
- Actions
169
-
- Forms
170
-
- Infolists
171
-
- Notifications
172
-
- Support
173
-
- Widgets
174
-
- Support
175
-
176
-
Next, compile your updated stylesheet using `npm run build`.
177
-
178
-
#### Configuration
179
-
180
-
Finally, the theme's colors, color shades, and icons need to be configured. You may do this by registering the theme's service provider in `config/app.php` by adding it to the `providers` array:
181
-
182
-
```php
183
-
/*
184
-
* Package Service Providers...
185
-
*/
186
-
Filament\MinimalThemeServiceProvider::class,
187
-
```
188
-
189
-
Alternatively, if you need more control or only want to use the theme in certain parts of your app, you may configure the theme manually (e.g. in a middleware):
190
-
191
-
```php
192
-
use Filament\MinimalTheme;
193
-
194
-
MinimalTheme::configure();
195
-
```
196
-
197
-
## Issues
198
-
199
-
If you find a bug in this package, please [contact Zep via email](mailto:[email protected]).
26
+
The Filament Minimal Theme can be installed using Composer. Visit the documentation for complete [installation instructions](https://whizzy.dev/themes/minimal?utm_source=filament&utm_medium=referral&utm_campaign=plugin&utm_content=installation).
0 commit comments