VelvetKit

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="flex flex-col gap-4 max-w-lg">
  <div role="alert" aria-live="assertive" aria-atomic="true" class="relative w-full rounded-md border p-4 flex items-start gap-3 [&>i]:translate-y-0.5 [&>i]:shrink-0 bg-background text-foreground border-input">
    <i data-lucide="info" class="inline-block w-4 h-4 shrink-0" aria-hidden="true"></i>
    <div class="flex flex-col gap-1 min-w-0 flex-1">
      <h5 class="font-medium leading-none tracking-tight">Title only, no description</h5>
    </div>
  </div>
  
  <div role="alert" aria-live="assertive" aria-atomic="true" class="relative w-full rounded-md border p-4 flex items-start gap-3 [&>i]:translate-y-0.5 [&>i]:shrink-0 bg-sky-50 text-sky-800 border-sky-300 dark:bg-sky-950/30 dark:text-sky-200 dark:border-sky-800">
    <i data-lucide="info" class="inline-block w-4 h-4 shrink-0" aria-hidden="true"></i>
    <div class="flex flex-col gap-1 min-w-0 flex-1">
      <h5 class="font-medium leading-none tracking-tight">Info with custom icon</h5>
    </div>
  </div>
  
  <div role="alert" aria-live="assertive" aria-atomic="true" class="relative w-full rounded-md border p-4 flex items-start gap-3 [&>i]:translate-y-0.5 [&>i]:shrink-0 bg-amber-50 text-amber-800 border-amber-300 dark:bg-amber-950/30 dark:text-amber-200 dark:border-amber-800">
    <i data-lucide="circle-alert" class="inline-block w-4 h-4 shrink-0" aria-hidden="true"></i>
    <div class="flex flex-col gap-1 min-w-0 flex-1">
      <h5 class="font-medium leading-none tracking-tight">Warning with custom icon, title only</h5>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
<div class="flex flex-col gap-4 max-w-lg">
  <%= render(UI::Alert.new) do |alert| %>
    <% alert.with_title { "Title only, no description" } %>
  <% end %>
  <%= render(UI::Alert.new(variant: :info)) do |alert| %>
    <% alert.with_title { "Info with custom icon" } %>
  <% end %>
  <%= render(UI::Alert.new(variant: :warning)) do |alert| %>
    <% alert.with_icon(name: "circle-alert") %>
    <% alert.with_title { "Warning with custom icon, title only" } %>
  <% end %>
</div>

No notes provided.

No params configured.