Dashboard | Laravael UI

Success Variant

Pembaruan Berhasil

Semua data perubahan telah disimpan secara aman ke server kami.

<div class="flex items-start gap-4 p-5 bg-emerald-50 dark:bg-emerald-500/10 rounded-2xl border border-emerald-200 dark:border-emerald-500/20">
    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-500 text-white">
        <i class="ti ti-check text-xl"></i>
    </div>
    <div class="flex-1">
        <h4 class="text-sm font-bold text-emerald-900 dark:text-emerald-400">Title</h4>
        <p class="text-sm text-emerald-700 dark:text-emerald-400/70">Message text...</p>
    </div>
</div>

Error Variant

Kesalahan Sistem

Maaf, sistem tidak dapat memproses permintaan Anda saat ini.

<div class="flex items-start gap-4 p-5 bg-red-50 dark:bg-red-500/10 rounded-2xl border border-red-200 dark:border-red-500/20">
    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-red-500 text-white">
        <i class="ti ti-bolt text-xl"></i>
    </div>
    <div class="flex-1">
        <h4 class="text-sm font-bold text-red-900 dark:text-red-400">Title</h4>
        <p class="text-sm text-red-700 dark:text-red-400/70">Error message...</p>
    </div>
</div>

Warning Variant

Peringatan Kuota

Penyimpanan Anda hampir penuh (92%).

<div class="flex items-start gap-4 p-5 bg-amber-50 dark:bg-amber-500/10 rounded-2xl border border-amber-200 dark:border-amber-500/20">
    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-500 text-white">
        <i class="ti ti-alert-triangle text-xl"></i>
    </div>
    <div class="flex-1">
        <h4 class="text-sm font-bold text-amber-900 dark:text-amber-400">Title</h4>
        <p class="text-sm text-amber-700 dark:text-amber-400/70">Warning message...</p>
    </div>
</div>

Info Variant

Informasi Sistem

Kami akan melakukan pemeliharaan rutin pada hari Minggu.

<div class="flex items-start gap-4 p-5 bg-indigo-50 dark:bg-indigo-500/10 rounded-2xl border border-indigo-200 dark:border-indigo-500/20">
    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-500 text-white">
        <i class="ti ti-info-circle text-xl"></i>
    </div>
    <div class="flex-1">
        <h4 class="text-sm font-bold text-indigo-900 dark:text-indigo-400">Title</h4>
        <p class="text-sm text-indigo-700 dark:text-indigo-400/70">Information message...</p>
    </div>
</div>

Keranjang

Notifikasi

Modern Alerts