blatui

Components

Gradient Text

Text painted with a gradient fill, with optional animated shimmer and colour presets.

php artisan blatui:add gradient-text

Build delightful interfaces 

<h1 class="text-4xl font-bold tracking-tight">
    <x-ui.gradient-text>Build delightful interfaces</x-ui.gradient-text>
</h1>

Animated

Shimmering by default 

<h1 class="text-4xl font-bold tracking-tight">
    <x-ui.gradient-text :animate="true" from="#06b6d4" via="#8b5cf6" to="#ec4899">
        Shimmering by default
    </x-ui.gradient-text>
</h1>

Inline

Ship faster with BlatUI — a set of accessible, copy-paste components for your next Laravel app. 

<p class="max-w-md text-lg leading-7">
    Ship faster with <x-ui.gradient-text preset="aurora" class="font-semibold">BlatUI</x-ui.gradient-text>
    — a set of accessible, copy-paste components for your next
    <x-ui.gradient-text preset="sunset" class="font-semibold">Laravel</x-ui.gradient-text> app.
</p>

Preset

sunset

ocean

candy 

<div class="space-y-2">
    @foreach (['sunset', 'ocean', 'candy'] as $preset)
        <h2 class="text-3xl font-bold tracking-tight">
            <x-ui.gradient-text :preset="$preset" class="capitalize">{{ $preset }}</x-ui.gradient-text>
        </h2>
    @endforeach
</div>