shadcn-ui 0.0.2 → 0.0.4

data/app/views/components/ui/_accordion.html.erb

@@ -14,7 +14,7 @@
         aria-expanded="true"
         data-orientation="vertical"
         class="flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180">
-        <%= title %><svg
+        <%= title || content_for(:title) %><svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="24"
@@ -34,7 +34,7 @@
       role="region"
       data-orientation="vertical"
       class="st-accordion__content overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
-      <div class="pb-4 pt-0"><%= description %></div>
+      <div class="pb-4 pt-0"><%= description || content_for(:description) %></div>
     </div>
   </div>
 </div>

data/app/views/components/ui/_alert.html.erb

@@ -2,7 +2,7 @@
   role="alert"
   class="<%= alert_classes %> relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4">
   <!--prettier-ignore-->
-  <% case variant %>
+  <% case variant.to_sym %>
   <% when :default %>
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -22,7 +22,19 @@
       y1="19"
       y2="19"></line>
   </svg>
-  <% when :error, :alert %>
+  <% when :info %>
+  <svg class="h-4 w-4 text-info" viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"></path>
+  </svg>
+  <% when :success %>
+  <svg class="h-4 w-4 text-success" viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path>
+  </svg>
+  <% when :attention %>
+  <svg class="h-4 w-4 text-yellow-400" viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
+  </svg>
+  <% when :error, :destructive, :danger, :alert %>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"
@@ -49,7 +61,7 @@
       y1="16"
       y2="16"></line>
   </svg>
-  <% end %>
+  <% end if icon %>
   <h5 class="mb-1 font-medium leading-none tracking-tight"><%= title %></h5>
   <div class="text-sm [&_p]:leading-relaxed"><%= description %></div>
 </div>

data/app/views/components/ui/_card.html.erb

@@ -8,6 +8,12 @@
     <% end %>
   </div>
   <% end %>
-  <div class="p-0 <%= "p-6 pt-0" if !block && title %> <%= "p-6" if !block && !title %> "><%= body %></div>
+  <% if !block && !title %>
+    <%= content_tag( :div, class: "p-6" ){ body } %>
+  <% elsif !block %>
+    <%= content_tag( :div, class: "px-6" ){ body } %>
+  <% else %>
+    <%= body %>
+  <% end %>
   <% if footer %><footer class="mx-6 mb-6"><%= footer %></footer><% end %>
 </div>

data/app/views/components/ui/_checkbox.html.erb

@@ -8,7 +8,8 @@
       value="on"
       class="peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
       for="<%= name %>"
-      data-action="click->ui--checkbox#toggle">
+      data-action="click->ui--checkbox#toggle"
+      id="<%= options[:id] %>">
       <span
         class="flex items-center justify-center text-current hidden"
         style="pointer-events: none">

data/app/views/components/ui/_collapsible.html.erb

@@ -6,11 +6,7 @@
     class="flex items-center justify-between space-x-4 px-4"
     data-action="click->ui--collapsible#toggle">
     <h4 class="text-sm font-semibold"><%= trigger %></h4>
-    <button
-      class="inline-flex items-center justify-center 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 hover:bg-accent hover:text-accent-foreground h-9 rounded-md w-9 p-0"
-      type="button"
-      aria-expanded="false"
-      data-state="closed">
+    <%= render_button variant: :ghost, data: {state: "closed"}, aria: {expanded: false}, class: "px-[0.75em] " do %>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="24"
@@ -26,7 +22,7 @@
         <path d="m7 9 5-5 5 5"></path>
       </svg>
       <span class="sr-only">Toggle</span>
-    </button>
+    <% end %>
   </div>
   <%= yield :preview %>
   <div

data/app/views/components/ui/_filter.html.erb

@@ -1,7 +1,7 @@
 <div data-controller="ui--filter">
 <%= render_card do %>
   <div class="flex items-center">
-    <%= content_for :filter_icon %>
+  <%= content_for :filter_icon %>
   <%= render_input name: "filter", placeholder: "Filter items...", style: :borderless, class: input_class, data: {"ui--filter-target": "source", action: "input->ui--filter#filter"} %></div>
   <%= render_separator %>
   <div class="<%= options[:class] %>">
@@ -12,3 +12,4 @@
     end %>
   </div>
 <% end %>
+</div>

data/app/views/components/ui/_sheet.html.erb

@@ -9,7 +9,7 @@
     data-ui--sheet-target="dialog"
     class="data-[state=closed]:hidden data-[state=open]:block fixed z-50 gap-4 bg-background p-6 shadow-lg
         transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500
-        inset-y-0 <%= options[:direction] %>-0 h-full <%= options[:width] %> border-l data-[state=closed]:slide-out-to-<%= options[:direction] %> data-[state=open]:slide-in-from-<%= options[:direction] %> sm:max-w-sm" tabindex="-1"
+        inset-y-0 <%= direction_class(options[:direction]) %> h-full <%= options[:width] %> border-l data-[state=closed]:slide-out-to-<%= options[:direction] %> data-[state=open]:slide-in-from-<%= options[:direction] %> sm:max-w-sm" tabindex="-1"
     style="pointer-events: auto">
       <div data-ui--sheet-target="content"><%= content_for(:sheet_content) %></div>
       <button

data/app/views/documentation/generators.html.md

@@ -0,0 +1,21 @@
+# Component Generators
+
+The gem adds generators to your application to help you copy the code from this application into
+yours.
+
+Each time you run the generator it will check to make sure you have the prerequisites, like Tailwind
+and the shadcn stylesheet, and if not, do its best to reconcile that for you.
+
+After that it will copy the component files into your application. If you edit the component,
+re-running the generator for it will remove your edits. **Re-running a component generator is
+basically reinstalling it and overwriting any changes you might have made.**
+
+The generator will show up in `rails g` and it is called `shadcn-ui`
+
+## Usage
+
+```
+rails generate shadcn-ui <component_name>
+```
+
+You can list out the available components from `rails g shadcn-ui`.

data/app/views/documentation/helpers.html.md

@@ -0,0 +1,54 @@
+# Component Helpers
+
+The main entry point to using the component is always a `render_<component>` method defined in the
+helper located in `app/helpers/components/<component>_helper.rb`.
+
+The main responsibility of the component's render method is to ultimatelly render the component's
+partial, located in `app/views/components/ui/_<component>.html.erb`.
+
+The component partial generally will integrate all the content passed to the component helper,
+whether through arguments or blocks.
+
+The render helper generally takes a hash of arguments, and a block. The arguments are used for
+required values for the HTML or for the content. Blocks generally correspond to inner content or
+sections for the component.
+
+<%= code_partial("dialog/usage", :erb) %>
+
+Here the `render_dialog` helper takes a block, and the block is used to render the `dialog_trigger`
+within the corresponding DOM along with the `dialog_content` as a sibling.
+
+Inner content is generally rendered with a `content_for` call, and the component render method will
+yield to the block, capture the content, and pass it along to the main partial.
+
+```ruby
+module Components::DialogHelper
+  def render_dialog(**options, &block)
+    content = capture(&block) if block
+    render "components/ui/dialog", content: content, **options
+  end
+
+  def dialog_trigger(&block)
+    content_for :dialog_trigger, capture(&block), flush: true
+  end
+
+  def dialog_content(&block)
+    content_for :dialog_content, capture(&block), flush: true
+  end
+end
+```
+
+That is a pretty standard example of how the components work. The component partial is responsible
+for the end result HTML.
+
+## Options
+
+Most of the components accept a variaty of DOM/HTML/Data related options. Sometimes these are
+explcitly defined in the render method, and sometimes they are globed as an `**options` argument.
+This should be standardized. As much as possible, I've tried to ensure that these are correctly
+accounted for and passed along to the final html/dom elements, but I imagine that is not the case
+everywhere. **Would love it if you raised an issue when you find this.**
+
+## Standardiziation
+
+As I add more components and see edge cases, I will move to standardizing the API.

data/app/views/documentation/index.html.md

@@ -13,3 +13,25 @@ Pick the components you need. Copy and paste the code into your project and cust
 The code is yours.
 
 _Use this as a reference to build your own component libraries._
+
+## What?
+
+### The Application
+
+The [repository for this library](https://github.com/aviflombaum/shadcn-rails) is both a gem and an
+example repository containing this documentation. AFAIK there is no consequence in terms of bloat to
+packaging and entire functional rails app within a gem, especially given the app has very few
+dependencies, no database, and is generally very small. The benefit is that you can run the app
+locally and see the components in action by booting up the application with `./bin/dev/` and going
+to localhost. In fact, this website is running the application within the gem right now.
+
+The benefit of this is that it gives you a working application from which to modify and copy the raw
+files for each component. The end goal of the gem is to simply copy working code from this
+application into your app so that you take ownership over the component and can customize it to your
+needs without any unnecessary abstraction.
+
+### The Gem
+
+The gem provides a generator for you to use in your application to facilitate copying the code from
+this application to yours. It also enforces some setup for you as the component files alone in
+isolation won't always work. [Learn more about the generator](/documentation/generators).

data/app/views/documentation/installation.html.md

@@ -1,4 +1,126 @@
-# Alpha Usage/Installation
+# Installation
+
+The more automated way to install the components into your application is via the gem packaged
+within this application. The gem provides generators that will setup your applications as best as
+possible without potentially overwriting any existing code as well as copy components and their
+dependencies to your application.
+
+## Add the Gem
+
+First step is adding the gem to your gemfile.
+
+```sh
+bundle add shadcn-ui
+bundle install
+```
+
+## Install and Setup Dependencies
+
+### TailwindCSS
+
+The components need a few things in order to render and function properly
+
+1. Tailwindcss must be installed in your application. If it's not already, I recommend just using
+   the `tailwindcss-rails` gem and running its installer to bootstrap your application with
+   TailwindCSS.
+
+2. A few tailwindcss npm packages are required by the theme and the best way to get them is to add
+   them to your package.json or even if you're application doesn't use node packages because you use
+   importmaps or something else, having a package.json will still work only to allow the tailwind
+   cli to compile the themes. The easiest way I've found to include everything you need is by
+   including only one package that will include the rest of them, `tailwind-animate`. Create a
+   package.json if you need via `echo '{}' >> package.json`.
+
+```
+npm install -D tailwind-animate
+```
+
+These are the requirements if you want to add them individually:
+
+```
+@tailwindcss/forms
+@tailwindcss/aspect-ratio
+@tailwindcss/typography
+@tailwindcss/container-queries
+tailwindcss-animate
+```
+
+### shadcn CSS - Required
+
+#### shadcn.css
+
+These steps were not automated and are required to be done manually.
+
+The components also require a few CSS variables to be set in order to render properly. It's a two
+step process, first, the gem installation should have added `app/assets/stylesheets/shadcn.css` to
+your application. You need to make sure this is included within `application.tailwind.css`, which
+should have happened automatically, but double check.
+
+```
+@import "shadcn.css";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+#### shadcn.tailwind.js
+
+The installation also should have added a `config/shadcn.tailwind.js` file to your application. This
+file is required to be included in your `tailwind.config.js` file. The best way to include it is to
+`require` it in your `tailwind.config.js` file and expand the configuration settings. This is what a
+newly setup `tailwind.config.js` file should look like after the inclusion of the
+`shadcn.tailwind.js` settings.
+
+```js
+const defaultTheme = require("tailwindcss/defaultTheme");
+const shadcnConfig = require("./shadcn.tailwind.js");
+
+module.exports = {
+  content: [
+    "./public/*.html",
+    "./app/helpers/**/*.rb",
+    "./app/javascript/**/*.js",
+    "./app/views/**/*.{erb,haml,html,slim}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["Inter var", ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+  plugins: [
+    require("@tailwindcss/forms"),
+    require("@tailwindcss/aspect-ratio"),
+    require("@tailwindcss/typography"),
+    require("@tailwindcss/container-queries"),
+  ],
+  ...shadcnConfig,
+};
+```
+
+You could also just use the shadcnConfig as the default Tailwind settings needed are also defined
+there..
+
+```js
+const shadcnConfig = require("./shadcn.tailwind.js");
+
+module.exports = {
+  ...shadcnConfig,
+};
+```
+
+After that feel free to add further customizatios to your tailwind config. For an existing tailwind
+config, just add shadcnConfig to the end of the config object. It will override any settings needed
+by being at the end. And obviously feel free to inspect shadcnConfig and keep only what's reui
+
+## End
+
+That's it! You are now set to start
+[installing components via the generator]("/documentation/generators") and rendering them into your
+views.
+
+# Manual Installation
 
 Prior to the initial gem release, you can use this as an alpha by cloning this repository and
 starting up the app as you would a standard rails app.
@@ -220,7 +342,7 @@ Add the following to your app/assets/stylesheets/application.tailwind.css file.
 }
 ```
 
-### Copy a a component's files to your application
+### Copy Component Files
 
 For example, if you want to use the Accordion component, you would copy the following files to your
 application:
@@ -247,3 +369,9 @@ See the component's demo page in `app/views/examples/components/accordion.html.e
 examples.
 
 This will be similar for each component.
+
+# Conclusion
+
+You can freely mix and match both styles as your application evolves. The end goal of each of them
+is to get the component code into your application so you can further customize and take ownership
+of your design system.

data/app/views/documentation/javascript.html.md

@@ -0,0 +1,8 @@
+# Stimulus Controllers
+
+Many components are paired with a stimulus controller that lives in
+`app/javascript/controllers/ui/<component>_controller.js`. As much as possible I try to avoid adding
+depedencies and currently this application is managing them with importmaps and I'm pretty sure if
+you're not using importmaps, this breaks.
+
+The Stimulus controllers frankly need a lot of work.

data/app/views/examples/components/accordion/_usage.html.erb

@@ -0,0 +1,15 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Accordion component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/accordion_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_accordion.html.erb") %></li>
+  <li><%= code("app/javascript/controllers/ui/accordion_controller.js") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The method <%= code("render_accordion") %> defined in <%= code("app/helpers/components/accordion_helper.rb") %>
+accepts a <%= code("title:") %> and <%= code("description:") %> keyword arguments in the inline usage.</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">When passed only a <%= code("title") %> argument, the helper will accept a block to be rendered as the content for the description.</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">When passed no arguments, the block passed to the accordion helper must call <%= code("accordion_title") %> and <%= code("accordion_description") %> both of which accept blocks for the content for those portals within the component.</p>

data/app/views/examples/components/accordion/code/_block.html.erb

@@ -0,0 +1,8 @@
+<%= render_accordion do %>
+  <%= accordion_title do %>
+    <em>If you need to customize the title</em>
+  <% end %>
+  <%= accordion_description do %>
+    Use the full block format.
+  <% end %>
+<% end %>

data/app/views/examples/components/accordion/code/_description.html.erb

@@ -0,0 +1,7 @@
+<%= render_accordion title: "Embed components in the description of an accordion" do %>
+  <%= accordion_description do %>
+    <%= render_card title: "A Simple Card", class: "w-full" do %>
+      <p class="p-6">But it could be anything really, give it a try.</p>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/examples/components/accordion/code/_preview.erb

@@ -0,0 +1,3 @@
+<%= render_accordion title: "Did you know?", description: "You can wrap shadcn helpers in any
+component library you want!" %>
+<%= render_accordion title: "Use the generators.", description: "Add components with #{code("rails g shadcn_ui add accordion")}".html_safe %>

data/app/views/examples/components/accordion/code/_usage.erb

@@ -0,0 +1,16 @@
+# Inline
+<%= render_accordion(title:, :description) %>
+
+# Description Block
+<%= render_accordion(title:) do %>
+
+<% end %>
+
+# Title and Description Block
+<% render_accordion do %>
+  <%= content_for :title do e%>
+  <% end %>
+
+  <%= content_for :description do e%>
+  <% end %>
+<% end %>

data/app/views/examples/components/accordion.html.erb

@@ -4,14 +4,48 @@
 
 <% content_for :preview, flush: true do %>
 <div class="w-full">
-  <%= render_accordion title: "Did you know?", description: "You can wrap shadcn helpers in any
-  component library you want!" %>
-  <%= render_accordion title: "Use the generators.", description: "Add components with #{code("rails g shadcn_ui add accordion")}".html_safe %>
+  <%= render_code_preview('accordion') %>
 </div>
 <% end %>
 
+<% content_for :code, flush: true do %>
+  <%= code_partial("accordion/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>
 
+<%= code_sample(language: "sh") do %>
+rails generate shadcn-ui accodordion
+<% end %>
+
 <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>
+
+<%= code_partial("accordion/usage", :erb) %>
+
+<%= render_usage("accordion") %>
+
+<% content_for :examples, flush: true do %>
+  <div class="w-full flex justify-center">
+    <%= render "examples/components/accordion/code/description" %>
+  </div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("accordion/description.html", :erb) %>
+<% end %>
+
+<%= render_example %>
+
+<% content_for :examples, flush: true do %>
+  <div class="w-full flex justify-center">
+    <%= render "examples/components/accordion/code/block" %>
+  </div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("accordion/block.html", :erb) %>
+<% end %>
+
+<%= render_example %>

data/app/views/examples/components/alert/_usage.html.erb

@@ -0,0 +1,10 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Alert component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/alert_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_alert.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The method <%= code("render_alert") %> defined in <%= code("app/helpers/components/alert_helper.rb") %>
+accepts a <%= code("title:") %> and <%= code("description:") %> required keyword arguments along with an optional <%= code("variant:") %> argument for the kind of alert to render. Skip the icon by setting the optional argument <%= code("icon:") %> to <%= code("false") %>.</p>

data/app/views/examples/components/alert/code/_attention.erb

@@ -0,0 +1,3 @@
+
+<%= render_alert(variant: :attention, title: "Attention",
+    description: "This variant is :attention") %>

data/app/views/examples/components/alert/code/_destructive.erb

@@ -0,0 +1,2 @@
+<%= render_alert(variant: :error, title: "Error",
+    description: "This variant is :error, :danger, :alert, :destructive") %>

data/app/views/examples/components/alert/code/_info.erb

@@ -0,0 +1,3 @@
+
+<%= render_alert(variant: :info, title: "Info",
+    description: "This variant is :info") %>

data/app/views/examples/components/alert/code/_no_icon.erb

@@ -0,0 +1,3 @@
+<% %><%= render_alert icon: false,
+      title: "Skip the Icon",
+      description: "By setting icon: to false in your render_alert call." %>

data/app/views/examples/components/alert/code/_preview.erb

@@ -0,0 +1,2 @@
+<%= render_alert title: "Did you know?",
+      description: "You can wrap shadcn helpers in any component library you want!" %>

data/app/views/examples/components/alert/code/_success.erb

@@ -0,0 +1,3 @@
+
+<%= render_alert(variant: :success, title: "Success",
+    description: "This variant is :success") %>

data/app/views/examples/components/alert/code/_usage.erb

@@ -0,0 +1 @@
+<%= render_alert title:, description:, variant: %>

data/app/views/examples/components/alert-dialog/code/_preview.erb

@@ -0,0 +1,6 @@
+<%= render_alert_dialog(
+  trigger: render_button("Open Dialog", variant: :outline, data: {action: "ui--dialog#open" }),
+  continue: render_button("Continue"),
+  label: "Are you absolutely sure?",
+  description: "This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
+) %>

data/app/views/examples/components/alert-dialog.html.erb

@@ -3,22 +3,19 @@
   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">
-  <!--prettier-ignore-->
+<% content_for :preview, flush: true do %>
+  <div class="w-full flex justify-center">
+    <%= render_code_preview('alert-dialog') %>
+  </div>
+<% end %>
 
-  <!--prettier-ignore-->
-  <%= render_alert_dialog(
-    trigger: render_button("Open Dialog", variant: :outline, data: {action: "ui--dialog#open" }),
-    continue: render_button("Continue"),
-    label: "Are you absolutely sure?",
-    description: "This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
-  ) %>
-</div>
+<% 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>