##### Recently Browses

- Apps Api
- Dashboard Marketing

##### Memebers

- Ethan Smith Backend Developer
- Isabella Garcia Digital Marketer
- Noah Walker Full Stack Developer

##### Filters

- customers:
  All customers list
- products:
  Bestselling products
- events:
  All upcoming events

## Alert

1. Home
3. Components
5. Alert

##### Alert Basic

Database fetched successfully

    <div role="alert" class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-green-500/20 text-green-800 dark:text-green-200">
      Database fetched successfully
    </div>

##### Icon

Database fetched successfully

    <div role="alert" class="flex gap-2.5 items-center px-4 py-2.5 rounded-lg bg-green-500/20 text-green-800 dark:text-green-200">
       <span class="icon-[lucide--database-zap] text-xl shrink-0"></span>
       <div class="flex-grow">
          Database fetched successfully
       </div>
    </div>

##### Title

Database fetched successfully

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    <!--alert-->
    <div role="alert"
       class="flex gap-2.5 items-start px-4 py-2.5 rounded-lg bg-green-500/20 text-green-800 dark:text-green-200">
       <span class="icon-[lucide--database-zap] text-xl shrink-0 mt-1"></span>
       <div class="flex-grow">
          <span class="text-lg font-semibold">
             Database fetched successfully
          </span>
          <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
             magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
             consequat.
          </p>
       </div>
    </div>

##### Closable

Database fetched successfully

    <div role="alert"
       class="alert fade show flex flex-wrap items-center justify-between px-4 py-2.5 rounded-lg bg-green-500/20 text-green-800 dark:text-green-200">
       Database fetched successfully
       <!--:Close alert:-->
       <span data-bs-dismiss="alert" aria-label="Close" class="icon-[lucide--x] text-xl cursor-pointer ms-3"></span>
    </div>

##### Variant

This is a Primary alert
This is a Default alert
This is a Warning alert
This is a Info alert
This is a Success alert
This is a Danger alert

    <!--alert primary-->
    <div role="alert"
       class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-primary/20 text-primary-deep dark:text-primary">
       This is a Primary alert
    </div>
    <!--alert default-->
    <div role="alert" class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-zinc-100 dark:bg-zinc-800">
       This is a Default alert
    </div>
    <!--alert warning-->
    <div role="alert"
       class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-yellow-500/20 text-yellow-800 dark:text-yellow-200">
       This is a Warning alert
    </div>
    <!--alert info-->
    <div role="alert"
       class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-sky-500/10 text-blue-800 dark:text-blue-200">
       This is a Info alert
    </div>
    <!--alert success-->
    <div role="alert"
       class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-green-500/20 text-green-800 dark:text-green-200">
       This is a Success alert
    </div>
    <!--alert danger-->
    <div role="alert"
       class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-red-500/10 text-red-800 dark:text-red-200">
       This is a Danger alert
    </div>