Dialog Edit
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Examples
<%= render_dialog do %>
<%= dialog_trigger do %>
<%= render_button("Open Typography", variant: :outline) %>
<% end %>
<%= dialog_content do %>
<h2 class="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">The King's Plan</h2>
<p class="leading-7 [&:not(:first-child)]:mt-6">
The king thought long and hard, and finally came up with
<a href="#" class="font-medium text-primary underline underline-offset-4">a brilliant plan</a>
: he would tax the jokes in the kingdom.
</p>
<blockquote class="mt-6 border-l-2 pl-6 italic">"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."</blockquote>
<% end %>
<% end %>
Installation
rails generate shadcn-ui dialog
Usage
<%= render_dialog do %>
<%= dialog_trigger do %>
<% end %>
<%= dialog_content do %>
<% end %>
<% end %>
The Dialog component introduces:
app/helpers/components/dialog_helper.rbapp/views/components/ui/_dialog.html.erbapp/javascript/controllers/ui/dialog_controller.js
The method render_dialog defined in app/helpers/components/dialog_helper.rb
accepts a blog for the inner components of the dialog.It renders the partial
app/views/components/ui/_dialog.html.erb which contains the model structure and
a close button.
The modal is composed of two components with corresponding helper methods, dialog_trigger,
which accepts a block for the element that will trigger the modal, and dialog_content,
which accepts a block for the body of the modal.
dialog_trigger and dialog_content must be called nested within
render_dialog
app/javascript/controllers/ui/dialog_controller.js is a stimulus controller that provides
the functionality of the modal.
Examples
<%= render_dialog do %>
<%= dialog_trigger do %>
<%= render_button("Open Notifications", variant: :outline) %>
<% end %>
<%= dialog_content do %>
<div class="bg-card text-card-foreground">
<div class="flex flex-col space-y-1.5 pb-3">
<h3 class="font-semibold leading-none tracking-tight">Notifications</h3>
<p class="text-sm text-muted-foreground">Choose what you want to be notified about.</p>
</div>
<div class=" pt-0 grid gap-1">
<div class="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="mt-px h-5 w-5"><path d="M8.60124 1.25086C8.60124 1.75459 8.26278 2.17927 7.80087 2.30989C10.1459 2.4647 12 4.41582 12 6.79999V10.25C12 11.0563 12.0329 11.7074 12.7236 12.0528C12.931 12.1565 13.0399 12.3892 12.9866 12.6149C12.9333 12.8406 12.7319 13 12.5 13H8.16144C8.36904 13.1832 8.49997 13.4513 8.49997 13.75C8.49997 14.3023 8.05226 14.75 7.49997 14.75C6.94769 14.75 6.49997 14.3023 6.49997 13.75C6.49997 13.4513 6.63091 13.1832 6.83851 13H2.49999C2.2681 13 2.06664 12.8406 2.01336 12.6149C1.96009 12.3892 2.06897 12.1565 2.27638 12.0528C2.96708 11.7074 2.99999 11.0563 2.99999 10.25V6.79999C2.99999 4.41537 4.85481 2.46396 7.20042 2.3098C6.73867 2.17908 6.40036 1.75448 6.40036 1.25086C6.40036 0.643104 6.89304 0.150421 7.5008 0.150421C8.10855 0.150421 8.60124 0.643104 8.60124 1.25086ZM7.49999 3.29999C5.56699 3.29999 3.99999 4.86699 3.99999 6.79999V10.25L4.00002 10.3009C4.0005 10.7463 4.00121 11.4084 3.69929 12H11.3007C10.9988 11.4084 10.9995 10.7463 11 10.3009L11 10.25V6.79999C11 4.86699 9.43299 3.29999 7.49999 3.29999Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
<div class="space-y-1">
<p class="text-sm font-medium leading-none">Everything</p>
<p class="text-sm text-muted-foreground">Email digest, mentions & all activity.</p>
</div>
</div>
<div class="-mx-2 flex items-start space-x-4 rounded-md bg-accent p-2 text-accent-foreground transition-all"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="mt-px h-5 w-5"><path d="M7.5 0.875C5.49797 0.875 3.875 2.49797 3.875 4.5C3.875 6.15288 4.98124 7.54738 6.49373 7.98351C5.2997 8.12901 4.27557 8.55134 3.50407 9.31167C2.52216 10.2794 2.02502 11.72 2.02502 13.5999C2.02502 13.8623 2.23769 14.0749 2.50002 14.0749C2.76236 14.0749 2.97502 13.8623 2.97502 13.5999C2.97502 11.8799 3.42786 10.7206 4.17091 9.9883C4.91536 9.25463 6.02674 8.87499 7.49995 8.87499C8.97317 8.87499 10.0846 9.25463 10.8291 9.98831C11.5721 10.7206 12.025 11.8799 12.025 13.5999C12.025 13.8623 12.2376 14.0749 12.5 14.0749C12.7623 14.075 12.975 13.8623 12.975 13.6C12.975 11.72 12.4778 10.2794 11.4959 9.31166C10.7244 8.55135 9.70025 8.12903 8.50625 7.98352C10.0187 7.5474 11.125 6.15289 11.125 4.5C11.125 2.49797 9.50203 0.875 7.5 0.875ZM4.825 4.5C4.825 3.02264 6.02264 1.825 7.5 1.825C8.97736 1.825 10.175 3.02264 10.175 4.5C10.175 5.97736 8.97736 7.175 7.5 7.175C6.02264 7.175 4.825 5.97736 4.825 4.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
<div class="space-y-1">
<p class="text-sm font-medium leading-none">Available</p>
<p class="text-sm text-muted-foreground">Only mentions and comments.</p>
</div>
</div>
<div class="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="mt-px h-5 w-5"><path d="M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
<div class="space-y-1">
<p class="text-sm font-medium leading-none">Ignoring</p>
<p class="text-sm text-muted-foreground">Turn off all notifications.</p>
</div>
</div>
</div>
</div>
<% end %>
<% end %>
</div>
<div class="w-full flex justify-center">
<%= render_dialog do %>
<%= dialog_trigger do %>
<%= render_button("Dialog with Form", variant: :outline) %>
<% end %>
<%= dialog_content do %>
<div class="flex flex-col space-y-1.5 text-center sm:text-left">
<h2
id="radix-:r7m:"
class="text-lg font-semibold leading-none tracking-tight">
Edit profile
</h2>
<p
id="radix-:r7n:"
class="text-sm text-muted-foreground">
Make changes to your profile here. Click save when you're done.
</p>
</div>
<div class="grid gap-4 py-4">
<div class="grid grid-cols-4 items-center gap-4">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-right"
for="name">Name
</label>
<input
class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 col-span-3"
id="name"
value="Pedro Duarte">
</div>
<div class="grid grid-cols-4 items-center gap-4">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-right"
for="username">Username
</label>
<input
class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 col-span-3"
id="username"
value="@peduarte">
</div>
<div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
<button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
type="submit">
Save changes
</button>
</div>
</div>
<% end %>
<% end %>
<%= render_dialog do %>
<%= dialog_trigger do %>
<%= render_button("Dialog with Form", variant: :outline) %>
<% end %>
<%= dialog_content do %>
<div class="flex flex-col space-y-1.5 text-center sm:text-left">
<h2
id="radix-:r7m:"
class="text-lg font-semibold leading-none tracking-tight">
Edit profile
</h2>
<p
id="radix-:r7n:"
class="text-sm text-muted-foreground">
Make changes to your profile here. Click save when you're done.
</p>
</div>
<div class="grid gap-4 py-4">
<div class="grid grid-cols-4 items-center gap-4">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-right"
for="name">Name
</label>
<input
class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 col-span-3"
id="name"
value="Pedro Duarte">
</div>
<div class="grid grid-cols-4 items-center gap-4">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-right"
for="username">Username
</label>
<input
class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 col-span-3"
id="username"
value="@peduarte">
</div>
<div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
<button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
type="submit">
Save changes
</button>
</div>
</div>
<% end %>
<% end %>