Cinder UI

  <div class="space-y-4">
  <div>
    <h4 class="text-sm font-medium mb-2">Default</h4>
    <.alert>
      <.icon name="circle-alert" />
      <:title>Heads up!</:title>
      <:description>
        You can add components to your app using the install task.
      </:description>
    </.alert>
  </div>

  <div>
    <h4 class="text-sm font-medium mb-2">Destructive</h4>
    <.alert variant={:destructive}>
      <.icon name="triangle-alert" />
      <:title>Unable to deploy</:title>
      <:description>
        Your build failed. Check logs and try again.
      </:description>
    </.alert>
  </div>

  <div>
    <h4 class="text-sm font-medium mb-2">Success</h4>
    <.alert variant={:success}>
      <.icon name="circle-check-big" />
      <:title>Changes saved</:title>
      <:description>
        Your updates have been successfully saved to the server.
      </:description>
    </.alert>
  </div>

  <div>
    <h4 class="text-sm font-medium mb-2">Warning</h4>
    <.alert variant={:warning}>
      <.icon name="triangle-alert" />
      <:title>Deprecated API</:title>
      <:description>
        This endpoint will be removed in the next major version.
      </:description>
    </.alert>
  </div>

  <div>
    <h4 class="text-sm font-medium mb-2">Info</h4>
    <.alert variant={:info}>
      <.icon name="info" />
      <:title>FYI</:title>
      <:description>
        Additional information to help you understand the current situation.
      </:description>
    </.alert>
  </div>
</div>