<!--prettier-ignore-->
<%= render "layouts/documentation/component_header",
  title: "Alert Dialog",
  description: "A modal dialog that interrupts the user with important content and expects a response." %>

<% content_for :preview, flush: true do %>
  <div class="w-full flex justify-center">
    <%= render_code_preview('alert-dialog') %>
  </div>
<% end %>

<% content_for :code, flush: true do %>
  <%= code_partial("alert-dialog/preview", :erb) %>
<% end %>

<%= render_preview %>


<h2 class="font-heading scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0" id="installation">Installation</h2>

<h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 mb-2 text-2xl font-semibold tracking-tight first:mt-0" id="usage"><a href="/docs/components/dialog#usage">Usage</a></h2>