New version 1.30.0 is now available 🎉 Introducing a useful command to search for component usage.

Powerful suite of Blade components for TALL Stack apps.

Deep Personalization

The deep personalization.

The deep personalization is a way to personalize components more deeply by overriding the component's original class. This form of personalization requires more work and more technical knowledge. We strongly suggest that you prefer soft personalization, which does not require as much technical knowledge from you.

To start deep personalization you must publish the TallStackUI configuration file.

As deep personalization consists of having absolute control over the component, the idea behind this form of personalization is to overwrite the original TallStackUI component, which is why more technical knowledge is necessary. Let's take look at an example:

1. Create a Blade component:

php artisan make:component Input

2. Edit the TallStackUI configuration file pointing the original component class to your component:

/*
|--------------------------------------------------------------------------
| Components List
|--------------------------------------------------------------------------
|
| List of all TallStackUi components.
*/
'components' => [
'input' => \App\View\Components\Input::class,
'textarea' => Components\Form\Textarea::class,
'password' => Components\Form\Password::class,
'toggle' => Components\Form\Toggle::class,
'radio' => Components\Form\Radio::class,
 
// ...
],

3. In your component, extends the original TallStackUI component:

namespace App\View\Components;
 
use Illuminate\Contracts\View\View;
 
class Input extends \TallStackUi\View\Components\Form\Input
{
public function __construct()
{
parent::__construct();
}
}

4. In your component, override the personalization method:

namespace App\View\Components;
 
use Illuminate\Contracts\View\View;
 
class Input extends \TallStackUi\View\Components\Form\Input
{
public function __construct()
{
parent::__construct();
}
 
public function personalization(): array
{
return [/* ... */];
}
}

Every customizable component has a method called personalization , which is where the classes come from. This method must return an array with the name of the personalizable blocks and their respective values which must be the CSS classes to be applied. To learn about customizable blocks, visit the documentation for the component you are personalizing.

Even if you prefer to use deep personalization, soft personalization can still be applied to components.

One of the great advantages of deep personalization is being able to touch the current color classes by replacing their content. This can be done in all components that have color definitions. Let's take look at an example:

Assuming you want to change the button colors, then this will be the approach to take:

namespace App\View\Components;
 
use Illuminate\Contracts\View\View;
 
class CustomButton extends \TallStackUi\View\Components\Button\Button
{
public function backgroundColor(): array
{
return [
'solid' => [
'primary' => '...',
 
// all other colors goes here: 'red' => '...'
],
'outline' => [
'primary' => '...',
 
// all other colors goes here: 'red' => '...'
],
'light' => [
'primary' => '...',
 
// all other colors goes here: 'red' => '...'
],
];
}
 
public function iconColor(): array
{
return [
'solid' => [
'primary' => '...',
 
// all other colors goes here: 'red' => '...'
],
'outline' => [
'primary' => '...',
 
// all other colors goes here: 'red' => '...'
],
'light' => [
'primary' => '...',
 
// all other colors goes here: 'red' => '...'
],
];
}
}

Note that in the example above the methods are defined with the term Color at the end. Also note that these methods must return an array containing an array of arrays, where the button type opens a new array containing the list of the colors you want to personalize. This will cause TallStackUI to use these color classes instead of the default color classes. See below a list of components that have color personalization and their respective information:

Component Methods Styles

Alert

backgroundColor textColor solid outline light

Avatar

backgroundColor
N/A

Badge

backgroundColor textColor iconColor solid outline light

Banner

backgroundColor textColor solid light

Button\Button

backgroundColor iconColor solid outline light

Button\Circle

backgroundColor iconColor solid outline light

Dialog

cancelColor
confirmColor
iconColor
N/A

Errors

backgroundColor
textColor
borderColor
N/A

Form\Radio

backgroundColor
No styles.

Form\Checkbox

backgroundColor
N/A

Form\Toggle

backgroundColor
N/A

Form\Range

thumbColor
N/A

Link

textColor
N/A

Progress

backgroundColor solid light

Stats

backgroundColor solid light outline

Toast

iconColor
N/A

Tooltip

backgroundColor
N/A

You could define only what you want to personalize. For example:

namespace App\View\Components;
 
use Illuminate\Contracts\View\View;
 
class CustomButton extends \TallStackUi\View\Components\Button\Button
{
public function backgroundColor(): array
{
return [
'solid' => [
'primary' => 'bg-primary-500 border-primary-500',
],
];
}
}

In this case the color personalization will only be applied for buttons solid with the color primary .

Since the name of colors used is not validated in favor of controlling which colors you can use in TallStackUI, you can easily create custom colors using deep personalization. Here is a complete example of how to do this:

1. Create the color in the TailwindCSS configuration file:

theme: {
extend: {
// ...
 
colors: {
'ocean': { // this will be the name of the color
'50': '#f1f8fe',
'100': '#e3effb',
'200': '#c0e0f7',
'300': '#88c7f1',
'400': '#49aae7',
'500': '#2292d8',
'600': '#1472b5',
'700': '#115b93',
'800': '#124e7a',
'900': '#154265',
'950': '#0e2a43',
},
}
},
},

2. Create new indexes of your custom color name:

namespace App\View\Components;
 
use Illuminate\Contracts\View\View;
 
class CustomButton extends \TallStackUi\View\Components\Button\Button
{
public function backgroundColor(): array
{
return [
'solid' => [
// other indexes goes here ...
 
'ocean' => 'bg-ocean-500 border-ocean-500 ...',
],
'outline' => [
// other indexes goes here ...
 
'ocean' => 'bg-transparent border-ocean-500 ...',
],
'light' =>
// other indexes goes here ...
 
'ocean' => 'bg-ocean-300 border-ocean-300 ...',
],
];
}
}

3. Use the component with the name of your custom color:

<x-button icon="users"
color="ocean"
outline
position="right">
Users
</x-button>

Make sure to build your assets to see your new custom color.

You can edit the Blade files of the TallStackUI components. Use this command to publish the files:

php artisan vendor:publish --tag=tallstackui.views

If you are personalizing your components using deep personalization, make sure you track your component classes so that TailwindCSS generates all the classes that come out of the files. Your tailwind.config.js needs to receive the following content:

content: [
// ...
 
'./app/View/Components/**/*.php',
],

Code highlighting provided by Torchlight