Globals

Globals change the visual behavior of TallStackUI components in a single place. You can think of them as "presets". Instead of customizing each component individually, you can apply sweeping visual changes across your entire application from your AppServiceProvider .

There are three available globals: flash , square , and colorful . Each one targets a different visual aspect of the components. You can use them individually or combine them together through a fluent API:

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->globals()
    ->flash()
    ->square()
    ->colorful();

The flash global removes all x-transition Alpine.js directives from components. This means no enter or leave animations will be applied, so components will appear and disappear instantly. This is useful when you want a snappy UI or when transitions feel too slow for your application's needs.

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->globals()
    ->flash();

The square global strips all rounded-* TailwindCSS classes from components, giving you sharp corners everywhere. This is perfect when your design system follows an angular or geometric visual language.

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->globals()
    ->square();

The colorful global inverts the colors of Dialog and Toast components. Instead of the default neutral background, the body background takes the notification type color (green for success, red for error, and so on) with white text. By default, it applies to both Dialog and Toast:

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->globals()
    ->colorful();

If you want to apply the colorful effect to only one of them, you can selectively enable or disable each one through boolean parameters:

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->globals()
    ->colorful(toast: true, dialog: false);

The flash and square globals accept only and except parameters so you can control exactly which components are affected. The only parameter restricts the global to specific component classes, while except applies it to all components except the ones you list:

// AppServiceProvider, "boot" method.
 
use TallStackUi\Components\Ui\Modal\Component as Modal;
use TallStackUi\Components\Ui\Slide\Component as Slide;
 
TallStackUi::customize()
    ->globals()
    ->flash(only: [Modal::class, Slide::class]);

// AppServiceProvider, "boot" method.
 
use TallStackUi\Components\Ui\Card\Component as Card;
 
TallStackUi::customize()
    ->globals()
    ->flash(except: [Card::class]);

// AppServiceProvider, "boot" method.
 
use TallStackUi\Components\Form\Input\Component as Input;
use TallStackUi\Components\Form\Select\Component as Select;
 
TallStackUi::customize()
    ->globals()
    ->square(only: [Input::class, Select::class]);

Since each global method returns the internal instance of the class Globals , you can chain multiple globals together in a single fluent call. This keeps your service provider clean and readable:

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->globals()
    ->flash()
    ->square()
    ->colorful();