v3.5.0 is out! Dozens of significant improvements overall! Keep your TallStackUI up to date to get the best experience.

Powerful suite of Blade components for TALL Stack apps.

Banner

Banner component.

# Concept

The banner component is a component intended to display text at the top of the page. It has two usage approaches: static usage to display fixed or random messages or Livewire integration to display messages that comes from the backend to the frontend.

# Usage

To use the component you must add it to your application layout, within the body tag:

<html>
    <body>
        <x-banner /> 
 
        <!-- ... -->
    </body>
</html>

# Messages

All you need to do is to set the text attribute with the message you want to display. 
<html>
    <body>
        <x-banner text="Welcome to the TallStackUI!" /> 
    </body>
</html>

You can also set random messages to be displayed: 

<html>
    <body>
        <!-- Plain array -->
        <x-banner :text="[
            'Welcome to the TallStackUI!',
            'This is the TallStackUI'
        ]" />
 
        <!-- Collection -->
        <x-banner :text="collect([
            'Welcome to the TallStackUI!',
            'This is the TallStackUI'
        ])" />
    </body>
</html>

# Left Slot 

<html>
    <body>
        <x-banner text="Welcome to the TallStackUI!"> 
            <x-slot:left>
                <x-icon name="check" />
            </x-slot:left>
        </x-banner>
    </body>
</html>

# Close Option 

<html>
    <body>
        <x-banner text="Welcome to the TallStackUI!" close /> 
    </body>
</html>

# Animations 

<html>
    <body>
        <!-- Default: entering in 3 seconds -->
        <x-banner text="Welcome to the TallStackUI!" animated />
 
        <!-- Entering in 2 seconds, leaving in 5 seconds -->
        <x-banner text="Welcome to the TallStackUI!" animated :enter="2" :leave="5" />
 
        <!-- Only leaving effect -->
        <x-banner text="Welcome to the TallStackUI!" animated :enter="null" :leave="5" />
    </body>
</html>

# Rotate

Turns the banner text into a right-to-left marquee. The animation is CSS-only (no JS/Alpine), pauses on hover, and respects prefers-reduced-motion . Cannot be combined with wire mode.

rotate accepts true (or just the bare attribute) for the default speed, or one of slow , normal , fast . 

<!-- Right-to-left marquee. CSS-only — no JS or Alpine. -->
<!-- Pause on hover and prefers-reduced-motion are respected. -->
 
<x-banner rotate text="Free shipping nationwide!" color="green" />
 
<!-- Speeds: slow, normal (default), fast -->
<x-banner rotate="slow" text="Take your time reading this." />
<x-banner rotate="fast" text="Limited time offer!" color="red" />
 
<!-- Combines with animated, close, or the left slot -->
<x-banner animated rotate text="I slide in, then I roll." color="blue" />
<x-banner rotate close text="Dismissible rolling banner" color="red" />
 
<x-banner rotate text="Rolling content with a left tag" color="blue">
    <x-slot:left>NEW</x-slot>
</x-banner>

When text is an array, all items are joined into a single rolling string using the separator prop (default ' • ' ): 

<!-- text array — joined into a single rolling string -->
<x-banner rotate :text="['Free shipping', '15% off', 'Use code XYZ']" color="indigo" />
 
<!-- custom separator (default is ' • ') -->
<x-banner rotate :text="['One', 'Two', 'Three']" separator=" — " />

# Date Limit

An option to control the final date to display the banner.

<html>
    <body>
        <x-banner text="Welcome to the TallStackUI!" until="2023-12-31" /> 
    </body>
</html>

# Size Variations 

<html>
    <body>
        <!-- Allowed: sm, md, lg -->
        <x-banner text="Welcome to the TallStackUI!" size="lg" />
    </body>
</html>

# Color Variations & Light Option 

<html>
    <body>
        <!-- All TailwindCSS colors -->
        <x-banner text="Welcome to the TallStackUI!" color="primary" />
        <x-banner text="Welcome to the TallStackUI!" color="secondary" />
 
        <!-- Light variation -->
        <x-banner text="Welcome to the TallStackUI!" color="primary" light />
        <x-banner text="Welcome to the TallStackUI!" color="secondary" light />
 
        <!-- Hexadecimal colors using TailwindCSS arbitrary colors -->
        <x-banner text="Welcome to the TallStackUI!"
                  :color="[
                      'background' => 'bg-[#fde68a]',
                      'text' => 'text-[#1f2937]',
                  ]" />
    </body>
</html>

# Dispatching via Controllers
NEW 

use Illuminate\Http\Request;
use TallStackUi\Traits\Interactions;
 
class PaymentController extends Controller
{
    use Interactions; 
 
    public function index()
    {
        return view('payment.index', [
            //
        ]);
    }
 
    public function update(Request $request)
    {
        // ...
 
        $this->banner() 
            ->success('...')
            ->close()
            ->enter(seconds: 3)
            ->leave(seconds: 10)
            ->send();
    }
}
Livewire Integration

# Concept

One of the benefits of the banner component is that it can be integrated with Livewire to send messages from the backend to the frontend - similar to the concept of using things like Toast or Dialog. When choosing to use the banner in this way, the only configurable attribute is the size , since all other things will be configured through the Livewire integration. Preparing the component is simple, just define the wire attribute in the component so that TallStackUI identifies the usage format integrated with Livewire: 

<html>
    <body>
        <x-banner wire /> 
 
        <!-- or -->
 
        <!-- Allowed: sm, md, lg -->
        <x-banner wire size="lg" />
    </body>
</html>

# Usage

  • Use the Interactions trait in your Livewire component. 
    use TallStackUi\Traits\Interactions; 
     
    class CreateUser extends Component
    {
        use Interactions; 
     
        // ...
    }
  • Dispatch the Banner from a method. 
    public function save(): void
    {
        $this->banner()->success('...')->send();
        $this->banner()->error('...')->send();
        $this->banner()->warning('...')->send();
        $this->banner()->info('...')->send();
    }
This is an example. You can not dispatch all at the same time.

# Available Options 

public function save(): void
{
    $this->banner()
        ->close() // Add the close button
        ->success('...')
        ->send();
 
    $this->banner()
        ->enter(seconds: 3) // Enter in 3 seconds
        ->leave(seconds: 10) // Leave in 10 seconds
        ->success('...')
        ->send();
 
    $this->banner()
        ->leave(seconds: 10) // Controlling only the seconds to leave
        ->success('...')
        ->send();
}

# Example 

public function success(): void
{
    $this->banner()
        ->close()
        ->success('This is a banner dispatched through Livewire. Will disappear in 5 seconds.')
        ->leave(5)
        ->send();
}

# Display After Redirects

When using flash() method, the banner will not be displayed in the current request, but yes stored temporarily in the session and displayed in the next request when you redirect to another page. 

use Illuminate\Contracts\View\View;
use Livewire\Component;
use TallStackUi\Traits\Interactions;
 
class Payment extends Component
{
    use Interactions;
 
    public function render(): View
    {
        return view('livewire.livewire');
    }
 
    public function save()
    {
        $this->banner()
            ->success('Done!', 'Your money has been sent!')
            ->flash() 
            ->send();
 
        return $this->redirect(route('dashboard'));
    }
}

Code highlighting provided by Torchlight