railsui 3.1.0

data/app/views/railsui/systems/forms/select.html.erb

@@ -0,0 +1,6 @@
+<% content_for :header_description do %>
+<p>A button that reveals a menu of selectable options when clicked.</p>
+<% end %>
+
+<%= render "railsui/shared/header" %>
+<%= render "railsui/themes/#{Railsui.config.theme}/forms/select" %>

data/app/views/railsui/systems/forms/switch.html.erb

@@ -0,0 +1,6 @@
+<% content_for :header_description do %>
+<p>A control that allows the user to toggle between checked and not checked.</p>
+<% end %>
+
+<%= render "railsui/shared/header" %>
+<%= render "railsui/themes/#{Railsui.config.theme}/forms/switch" %>

data/app/views/railsui/systems/forms/validation.html.erb

@@ -0,0 +1,6 @@
+<% content_for :header_description do %>
+<p>Pre-styled validation UI for form error responses.</p>
+<% end %>
+
+<%= render "railsui/shared/header" %>
+<%= render "railsui/themes/#{Railsui.config.theme}/forms/validation" %>

data/app/views/railsui/systems/forms.html.erb

@@ -0,0 +1,2 @@
+<%= render "railsui/shared/header" %>
+<%= render "railsui/themes/#{Railsui.config.theme}/forms" %>

data/app/views/railsui/systems/helpers/custom_colors.html.erb

@@ -0,0 +1,100 @@
+<% content_for :header_description do %>
+<p>A bundled helper responsible for rendering RGB color codes for your primary and secondary color schemes.</p>
+<% end %>
+
+<%= render "railsui/shared/header" %>
+
+<div id="custom_colors">
+<div class="prose prose-neutral dark:prose-invert">
+  <p>The <code>custom_colors_css</code> helper is used to generate the RGB color codes for your primary and secondary color schemes. You'll find this helper rendering inside <code>app/views/rui/shared/_railsui_head.html.erb</code></p>
+
+  <h3>What it does</h3>
+  <p>This helper outputs custom styles in your applications head tags that assign RGB values to CSS variables in a dynamic way. The CSS variables are absorbed via your Tailwind configuration and Rails UI configuration which in return adds two additional colors to the default Tailwind CSS color palette.</p>
+
+  <p>Your Rails UI theme dictates the colors that are assigned by default but you may change these colors at any time via the <%= link_to "Rails UI configuration form", root_path(anchor: "color") %>.</p>
+</div>
+
+<%= render layout: example, locals: { heading: "custom_colors_css"} do %>
+
+  <div class="my-6 max-w-full not-prose">
+    <div class="divide-y divide-neutral-200/80 dark:divide-neutral-700/80">
+      <% Railsui.config.colors.each do |collection, colors| %>
+        <div class="py-3">
+          <h3 class="my-3 font-semibold"><%= collection.capitalize %> Colors</h3>
+          <div class="grid grid-cols-1 gap-3 mb-8 md:grid-cols-11">
+            <% colors.each do |shade, hex| %>
+              <div class="flex gap-2 items-center color-item md:block">
+                <div class="rounded-md size-8" style="background-color: <%= hex %>;"></div>
+
+                <div class="mt-1 leading-none text-left">
+                  <p class="text-sm font-semibold text-neutral-800 dark:text-neutral-200"><%= shade %></p>
+                  <code class="font-mono text-xs text-neutral-600 selection:bg-indigo-500 selection:text-white dark:text-neutral-400"><%= hex %></code>
+                </div>
+              </div>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+
+    <div class="flex justify-end">
+      <%= link_to "Change my colors", root_path(anchor: "color"), class: "btn btn-white" %>
+    </div>
+  </div>
+
+<% content_for :example, flush: true do %>
+<% content_for :erb, flush: true do %>
+<!-- Find it inside app/views/rui/shared/_railsui_head.html.erb -->
+<% end %>
+<% content_for :haml, flush: true do %>
+= custom_colors_css
+<% end %>
+<% content_for :html, flush: true do %>
+      <!-- example output -->
+<style id="rui-custom-colors">
+:root {
+  --primary-50: 244 249 245;
+  --primary-100: 229 243 233;
+  --primary-200: 204 230 211;
+  --primary-300: 163 210 176;
+  --primary-400: 115 181 134;
+  --primary-500: 79 152 100;
+  --primary-600: 61 124 79;
+  --primary-700: 51 98 64;
+  --primary-800: 46 83 57;
+  --primary-900: 37 66 47;
+  --primary-950: 16 35 22;
+  --secondary-50: 241 243 252;
+  --secondary-100: 229 232 250;
+  --secondary-200: 208 213 245;
+  --secondary-300: 180 186 237;
+  --secondary-400: 149 150 228;
+  --secondary-500: 128 123 217;
+  --secondary-600: 111 97 202;
+  --secondary-700: 95 81 177;
+  --secondary-800: 77 68 143;
+  --secondary-900: 66 60 124;
+  --secondary-950: 46 41 78;
+}
+</style>
+
+    <% end %>
+
+<% content_for :ruby, flush: true do %>
+
+
+<% end %>
+<%= render_snippet %>
+
+  <% end %>
+<% end %>
+</div>
+
+<%= system_pagination(prev_path: systems_helpers_railsui_head_path, prev_text: "Rails UI Head", next_path: systems_content_typography_path, next_text: "Typography") %>
+
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "custom_colors_css", "#custom_colors" %>
+  <% end %>
+<% end %>

data/app/views/railsui/systems/helpers/demo_avatar.html.erb

@@ -0,0 +1,77 @@
+<% content_for :header_description do %>
+<p>A fun helper that makes rendering placeholder avatars easy.</p>
+<% end %>
+
+<%= render "railsui/shared/header" %>
+
+<div id="demo_avatar">
+<div class="prose prose-neutral dark:prose-invert mb-6">
+<p>For testing purposes and demos we leverage a homemade helper <code>demo_avatar_url</code>. This can be passed two options <code>id</code> and <code>variant</code> that returns an absolute URL sourcing the website <code>https://randomuser.me</code>.</p>
+</div>
+
+<%= render callout do %>
+<p>The <code>demo_avatar_url</code> helper is accessbile automatically assuming the Rails UI gem is installed. No setup required.</p>
+<% end %>
+
+  <div class="relative text-neutral-800 dark:text-neutral-200 md:p-6 p-4 border border-dashed rounded-md border-neutral-200 dark:border-neutral-700/80 my-6 bg-neutral-50 dark:bg-neutral-950">
+    <code class="font-semibold">demo_avatar_url(id:, variant:)</code>
+    <h4 class="pb-2 my-4 text-xs font-semibold tracking-wider uppercase border-b border-neutral-300 dark:border-neutral-700/80 opacity-75">Options</h4>
+    <ul class="space-y-2 mb-6">
+      <li>
+        <p><code class="font-mono text-pink-600">id</code></p>
+        <p>A number between 1-100.</p>
+      </li>
+      <li>
+        <p><code class="font-mono text-pink-600">variant</code></p>
+        <p><code>men</code>, <code>women</code></p>
+      </li>
+    </ul>
+  </div>
+
+<%= render layout: example, locals: { heading: "Demo Avatar"} do %>
+
+<%= render preview 'gray' do %>
+<div class="flex items-center gap-4">
+  <%= image_tag demo_avatar_url(id: 46, variant: "men"), alt: "Demo Avatar", class: "size-16 rounded-full object-cover" %>
+  <%= image_tag demo_avatar_url(id: 46, variant: "women"), alt: "Demo Avatar", class: "size-16 rounded-full object-cover" %>
+  <%= image_tag demo_avatar_url(id: 8, variant: "women"), alt: "Demo Avatar", class: "size-16 rounded-full object-cover" %>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :erb, flush: true do %>
+<%%= image_tag demo_avatar_url(id: 46, variant: "men"), alt: "Demo Avatar", class: "size-16 rounded-full object-cover" %>
+
+<%%= image_tag demo_avatar_url(id: 46, variant: "women"), alt: "Demo Avatar", class: "size-16 rounded-full object-cover" %>
+
+<%%= image_tag demo_avatar_url(id: 8, variant: "women"), alt: "Demo Avatar", class: "size-16 rounded-full object-cover" %>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+= image_tag demo_avatar_url(id: 46, variant: "men"), alt: "Demo Avatar", class: "size-16 rounded-full object-cover"
+= image_tag demo_avatar_url(id: 46, variant: "women"), alt: "Demo Avatar", class: "size-16 rounded-full object-cover"
+= image_tag demo_avatar_url(id: 8, variant: "women"), alt: "Demo Avatar", class: "size-16 rounded-full object-cover"
+<% end %>
+
+<% content_for :ruby, flush: true do %>
+def demo_avatar_url(options = {})
+  id = options[:id] || "22"
+  variant = options[:variant] || "men"
+
+  "https://randomuser.me/api/portraits/#{variant}/#{id}.jpg"
+end
+<% end %>
+
+<%= render_snippet active_tab: :erb, ruby_filename: "my_helper.rb" %>
+<% end %>
+<% end %>
+</div>
+
+
+<%= system_pagination(prev_path: systems_helpers_spacer_path, prev_text: "Email Spacer", next_path: systems_helpers_railsui_head_path, next_text: "Rails UI Head") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Demo Avatar", "#demo_avatar" %>
+  <% end %>
+<% end %>

data/app/views/railsui/systems/helpers/email_action.html.erb

@@ -0,0 +1,121 @@
+<% content_for :header_description do %>
+<p>Buttons in emails are hard. This helper makes them easy.</p>
+<% end %>
+
+<%= render "railsui/shared/header" %>
+
+<div id="email_action">
+<div class="prose prose-neutral dark:prose-invert mb-6">
+  <p>The <code>email_action</code> helper extracts logic for displaying buttons and adding dependable spacing between HTML elements in a given template.</p>
+</div>
+
+<%= render callout do %>
+<p><code>email_action</code> is added automatically when you install Rails UI and appended to your <code>application_helper.rb</code> file.</p>
+<% end %>
+
+<div class="not-prose">
+<% content_for :ruby, flush: true do %>
+def email_action(action, url, options={})
+  align = options[:align] ||= "left"
+  theme = options[:theme] ||= "primary"
+  fullwidth = options[:fullwidth] ||= false
+  render "rui/shared/email_action", align: align, theme: theme, action: action, url: url, fullwidth: fullwidth
+end
+<% end %>
+
+<%= render_snippet active_tab: :ruby, ruby_filename: "application_helper.rb" %>
+</div>
+  <div class="prose prose-neutral dark:prose-invert my-6">
+    <p>You'll find the partials referenced above inside the <code>rui/shared</code> view directory. Treat these as read-only as swapping themes may override your changes.</p>
+  </div>
+
+  <div class="prose prose-neutral dark:prose-invert">
+    <p>Customize the theming inside the <%= link_to "Rails UI mailer layout", systems_mailers_layout_path %> css. </p>
+  </div>
+
+  <div class="relative text-neutral-800 dark:text-neutral-200 md:p-6 p-4 border border-dashed rounded-md border-neutral-200 dark:border-neutral-700/80 my-6 bg-neutral-50 dark:bg-neutral-950">
+    <code class="font-semibold">email_action(action, path, options)</code>
+    <h4 class="pb-2 my-4 text-xs font-semibold tracking-wider uppercase border-b border-neutral-300 dark:border-neutral-700/80 opacity-75">Required parameters</h4>
+    <ul class="space-y-2 mb-6">
+      <li>
+        <p><code class="font-mono text-pink-600">action</code>  <em class="text-neutral-400">- required</em></p>
+        <p>The button label</p>
+      </li>
+      <li>
+        <p><code class="font-mono text-pink-600">path</code> <em class="text-neutral-400">- required</em></p>
+        <p>The url for the button. Be sure to use url helpers and not path helpers in an email </p>
+      </li>
+    </ul>
+    <h4 class="pb-2 my-4 text-xs font-semibold tracking-wider uppercase border-b border-neutral-300 dark:border-neutral-700/80 opacity-75">Additional options</h4>
+    <ul class="space-y-2">
+      <li>
+        <p><code class="font-mono text-pink-600">theme</code></p>
+        <p>
+          <span class="font-mono font-medium text-sky-600">primary</span> or <span class="font-mono font-medium text-sky-600">secondary</span>. Default: <span class="font-mono font-medium text-sky-600">primary</span>.
+        </p>
+      </li>
+      <li>
+        <p><code class="font-mono text-pink-600">align</code></p>
+        <p>Align button to
+          <span class="font-mono text-sky-600">center</span>, <span class="font-mono text-sky-600">left</span>, or <span class="font-mono text-sky-600">right</span>.
+          Default: <span class="font-mono text-sky-600">left</span>
+        </p>
+      </li>
+      <li>
+        <p><code class="font-mono text-pink-600">fullwidth</code></p>
+        <p>(boolean) <span class="font-mono text-sky-600">true</span> / <span class="font-mono text-sky-600">false</span>. Default:  <span class="font-mono text-sky-600">false</span>
+        </p>
+      </li>
+    </ul>
+  </div>
+
+<%= render layout: example, locals: { heading: "Email Action"} do %>
+
+<%= email_viewer("A sample email") do %>
+  <%= render layout: "railsui/themes/#{Railsui.config.theme.downcase}/mailers/mailer_preview" do %>
+    <p>Welcome to our service! We're excited to have you join us. Below you'll find important information about your account and next steps.</p>
+    <p>To get started, please verify your email address by clicking the button below:</p>
+    <%= email_action "View notification", "#", align: "center", theme: "primary", fullwidth: true %>
+  <% end %>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :erb, flush: true do %>
+<!-- all available options shown in use -->
+<%%= email_action("View notification", root_url, theme: "primary", align: "center", fullwidth: true) %>
+<% end %>
+
+<% content_for :html, flush: true do %>
+<!-- what outputs from mail_action -->
+<table class="action" align="center">
+  <tr>
+    <td align="center">
+      <a href="<%= root_url %>" class="action__link action__link--primary" target="_blank">View notification</a>
+      <div itemscope itemtype="http://schema.org/EmailMessage">
+        <div itemprop="potentialAction" itemscope itemtype="http://schema.org/ViewAction">
+          <link itemprop="target" href="<%= root_url %>"/>
+          <meta itemprop="name" content="View notification"/>
+        </div>
+      </div>
+    </td>
+  </tr>
+</table>
+<% end %>
+
+<% content_for :ruby, flush: true do %>
+
+<% end %>
+
+<%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>
+
+
+<%= system_pagination(prev_path: systems_helpers_nav_link_path, prev_text: "Nav Link", next_path: systems_helpers_email_callout_path, next_text: "Email Callout") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Email Action", "#email_action" %>
+  <% end %>
+<% end %>

data/app/views/railsui/systems/helpers/email_callout.html.erb

@@ -0,0 +1,67 @@
+<% content_for :header_description do %>
+<p>A simple extraction for a callout in an email.</p>
+<% end %>
+
+<%= render "railsui/shared/header" %>
+
+<div id="email_callout">
+<div class="prose prose-neutral dark:prose-invert">
+  <h3>Callouts</h3>
+  <p>Callouts help you highlight important information in an email. Rails UI has a simple helper that lets you add callouts easily. You can add your content and basic HTML to format it. You can change how callouts look in the <%= link_to "mailer layout", systems_mailers_layout_path %> CSS.</p>
+</div>
+
+<%= render layout: example, locals: { heading: "Email Callout"} do %>
+<%= email_viewer("Callout example") do %>
+  <%= render layout: "railsui/themes/#{Railsui.config.theme.downcase}/mailers/mailer_preview" do %>
+    <h3>He made many woofs</h3>
+    <p>The playful pup wagged his tail with excitement as he explored the backyard.</p>
+
+    <p>From chasing squirrels to digging holes, our furry friend's day was filled with canine adventures. His boundless energy and enthusiasm brought joy to everyone around him.</p>
+
+    <table class="callout">
+      <tbody>
+        <td>
+          <p>Reminder: Don't forget to give your dog fresh water and a treat!</p>
+        </td>
+      </tbody>
+    </table>
+
+    <p>As the sun began to set, our loyal companion curled up in his favorite spot, dreaming of bones and belly rubs. His presence in our lives reminds us of the unconditional love and happiness that dogs bring to their human families.</p>
+  <% end %>
+<% end %>
+
+<% content_for :example, flush: true do %>
+
+<% content_for :html, flush: true do %>
+<table class="callout">
+  <tbody>
+    <td>
+      <p>This is my neat email callout.</p>
+    </td>
+  </tbody>
+</table>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<%%= email_callout do %>
+  <p>This is my neat email callout.</p>
+<%% end %>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+= email_callout do
+  %p This is my neat email callout.
+<% end %>
+
+<%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>
+
+<%= system_pagination(prev_path: systems_helpers_email_action_path, prev_text: "Email Action", next_path: systems_helpers_spacer_path, next_text: "Email Spacer") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Email Callout", "#email_callout" %>
+  <% end %>
+<% end %>

data/app/views/railsui/systems/helpers/icon.html.erb

@@ -0,0 +1,10 @@
+<% content_for :header_description do %>
+<p>Render SVG icons inline using the railsui-icon gem.</p>
+<% end %>
+
+<%= render "railsui/shared/header" %>
+
+<%= render "railsui/themes/#{Railsui.config.theme}/icons", cached: true, hide_pagination: true %>
+
+
+<%= system_pagination(prev_path: systems_helpers_overview_path, prev_text: "Overview", next_path: systems_helpers_nav_link_path, next_text: "Nav Link") %>

data/app/views/railsui/systems/helpers/nav_link.html.erb

@@ -0,0 +1,99 @@
+<% content_for :header_description do %>
+<p>A dynamic nav link helper that makes it easy to add active states to your nav links.</p>
+<% end %>
+
+<%= render "railsui/shared/header" %>
+
+<div id="nav_link">
+<%= render layout: example, locals: { heading: "Nav Link"} do %>
+<%= render preview 'gray' do %>
+<div class="flex items-center gap-3">
+  <%= nav_link_to "Nav Link", "#", class: "btn btn-link", active_class: "btn btn-primary", inactive_class: "btn btn-link" %>
+
+  <%= nav_link_to "#", class: "flex items-center gap-2 btn btn-dark", active_class: "btn btn-secondary", inactive_class: "btn btn-dark" do %>
+    <%= icon "home", class: "size-4 stroke-white flex-shrink-0" %>
+    <span>Home</span>
+  <% end %>
+</div>
+<% end %>
+
+<div class="prose prose-neutral my-6 max-w-full dark:prose-invert">
+<p>The helper includes active and inactive state options along with standard HTML options available in the <code>link_to</code> helper. The Ruby code is for reference only as it's included in the Rails UI gem.</p>
+<h3>Options</h3>
+
+<ul>
+  <li>
+    <code>name</code> - The name of the link.
+  </li>
+  <li>
+    <code>url/path</code> - Pass the url or path to the helper.
+  </li>
+  <li>
+    <code>active_class</code> - The class to apply when the link is active based on the current path.
+  </li>
+  <li>
+    <code>inactive_class</code> - The class to apply when the link is inactive.
+  </li>
+  <li>
+    <code>*html_options</code> - pass any other html options to the link as you would a normal link_to helper.
+  </li>
+</ul>
+</div>
+
+<% content_for :example, flush: true do %>
+<% content_for :erb, flush: true do %>
+<div class="flex items-center gap-3">
+  <!-- render inline -->
+  <%%= nav_link_to "Nav Link", "#", class: "btn btn-link", active_class: "btn btn-primary", inactive_class: "btn btn-link" %>
+
+  <!-- render as block -->
+  <%%= nav_link_to "#", class: "flex items-center gap-2 btn btn-dark", active_class: "btn btn-secondary", inactive_class: "btn btn-dark" do %>
+    <%%= icon "home", class: "size-4 stroke-white flex-shrink-0" %>
+    <span>Home</span>
+  <%% end %>
+</div>
+<% end %>
+
+<% content_for :ruby, flush: true do %>
+def nav_link_to(name = nil, options = {}, html_options = {}, &block)
+  if block
+    html_options = options
+    options = name
+    name = block
+  end
+
+  url = url_for(options)
+  starts_with = html_options.delete(:starts_with)
+  html_options[:class] = Array.wrap(html_options[:class])
+  active_class = html_options.delete(:active_class) || "nav-link-active"
+  inactive_class = html_options.delete(:inactive_class) || ""
+
+  active = if (paths = Array.wrap(starts_with)) && paths.present?
+    paths.any? { |path| request.path.start_with?(path) }
+  else
+    request.path == url
+  end
+
+  classes = active ? active_class : inactive_class
+  html_options[:class] << classes unless classes.empty?
+
+  html_options.except!(:class) if html_options[:class].empty?
+
+  return link_to url, html_options, &block if block
+
+  link_to name, url, html_options
+end
+<% end %>
+
+<%= render_snippet active_tab: :erb, erb_filename: "nav.html.erb", ruby_filename: "application_helper.rb" %>
+<% end %>
+<% end %>
+</div>
+
+<%= system_pagination(prev_path: systems_helpers_icon_path, prev_text: "Icon", next_path: systems_helpers_email_action_path, next_text: "Email Action") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Nav Link", "#nav_link" %>
+  <% end %>
+<% end %>

data/app/views/railsui/systems/helpers/overview.html.erb

@@ -0,0 +1,19 @@
+<% content_for :header_description do %>
+<p>Rails UI includes several useful view helpers to enhance your app and mailer interfaces.</p>
+
+<p>We've taken a lean approach to helpers, focusing on essential functionality while giving you the flexibility to customize and extend your Rails app as needed using your own helpers.</p>
+<% end %>
+
+<%= render "railsui/shared/header" %>
+
+<%= render layout: "railsui/shared/linkables" do %>
+  <%= render "railsui/shared/linkable", path: systems_helpers_icon_path, title: "Icon", description: "Render SVG icons inline using the railsui-icon gem." %>
+  <%= render "railsui/shared/linkable", path: systems_helpers_nav_link_path, title: "Nav Link", description: "A dynamic nav link helper that makes it easy to add active states to your nav links." %>
+  <%= render "railsui/shared/linkable", path: systems_helpers_email_action_path, title: "Email action", description: "Buttons in emails are hard. This helper makes theme easy." %>
+  <%= render "railsui/shared/linkable", path: systems_helpers_email_callout_path, title: "Email callout", description: "A simple extraction for a callout in an email." %>
+  <%= render "railsui/shared/linkable", path: systems_helpers_spacer_path, title: "Email spacer", description: "A clever way to add consistent vertical spacing in emails." %>
+
+  <%= render "railsui/shared/linkable", path: systems_helpers_demo_avatar_path, title: "Demo Avatar", description: "A fun helper that makes rendering placeholder avatars easy." %>
+
+  <%= render "railsui/shared/linkable", path: systems_helpers_railsui_head_path, title: "Rails UI Head", description: "A bundled helper responsible for rendering a collection of partials in the head tags of your app." %>
+<% end %>

data/app/views/railsui/systems/helpers/railsui_head.html.erb

@@ -0,0 +1,64 @@
+<% content_for :header_description do %>
+<p>A bundled helper responsible for rendering a collection of partials in the head tags of your app.</p>
+<% end %>
+
+<%= render "railsui/shared/header" %>
+
+<div id="railsui_head">
+<div class="prose prose-neutral dark:prose-invert mb-6">
+  <h3>Rails UI Head</h3>
+  <p>The <code>railsui_head</code> helper is responsible for rendering a collection of partials in the head tags of your app. It's a handy way to include common elements like stylesheets, fonts, JavaScript files, and meta tags without having to repeat them in every view. Assets included vary by theme.</p>
+
+  <p>This helper renders by default for each Rails UI layout when you install Rails UI. You'll find it inside <code>app/views/code/layouts/rui/railsui.html.erb</code> and any other layouts with the <code>railsui_</code> prefix in the name (i.e. <code>railsui_admin.html.erb</code>).</p>
+</div>
+
+<%= render callout do %>
+  <p>You shouldn't need to do much outside of ensure this helper renders in your layouts. Consider this page for reference.</p>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<%%= railsui_head %>
+<% end %>
+<%= render_snippet active_tab: :erb %>
+
+<%= divider %>
+
+<% content_for :erb, flush: true do %>
+<!-- app/views/code/layouts/rui/railsui.html.erb -->
+
+<!-- Meta tags via meta-tags gem. Customize yours at app/views/rui/shared/_meta.html.erb -->
+<%%= render "rui/shared/meta" %>
+
+<!-- Custom fonts for each theme -->
+<%%= render "rui/shared/fonts" %>
+
+<!-- CDN links for 3rd party CSS -->
+<%%= stylesheet_link_tag "https://unpkg.com/tippy.js@6.3.7/dist/tippy.css", "https://unpkg.com/trix@2.1.8/dist/trix.css", "data-turbo-track": "reload" %>
+
+<!-- Various 3rd party JavaScript if necessary -->
+
+<%%= yield :head %>
+
+<% end %>
+<%= render_snippet active_tab: :erb, erb_filename: "_railsui_head.html.erb" %>
+
+<div class="prose prose-neutral dark:prose-invert">
+  <h3>yield :head</h3>
+  <p>Included is a a <code><%%= yield :head %></code> statement so you can add additional assets in the <code>head</code> tags inside your views as necessary or leverage <%= link_to "Turbo morphing", "https://turbo.hotwired.dev/handbook/page_refreshes#morphing", target: :_blank %> as required.</p>
+</div>
+
+<% content_for :erb, flush: true do %>
+<%% content_for :head do %>
+  <%%= javascript_include_tag "https://unpkg.com/alpinejs@3.12.2/dist/cdn.min.js", "data-turbo-track": "reload" %>
+<%% end %>
+<% end %>
+<%= render_snippet active_tab: :erb, erb_filename: "index.html.erb" %>
+</div>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Rails UI Head", "#railsui_head" %>
+  <% end %>
+<% end %>
+
+<%= system_pagination(prev_path: systems_helpers_demo_avatar_path, prev_text: "Demo Avatar", next_path: systems_path, next_text: "Design patterns") %>

data/app/views/railsui/systems/helpers/spacer.html.erb

@@ -0,0 +1,41 @@
+<% content_for :header_description do %>
+<p>A clever way to add consistent vertical spacing in emails.</p>
+<% end %>
+
+<%= render "railsui/shared/header" %>
+
+<div id="spacer" class="prose prose-neutral dark:prose-invert">
+<p>The spacer helper adds vertical space between elements in email templates using tables, since margins and padding can be unreliable across email clients.</p>
+
+<p>Instead of writing HTML tables manually, use this helper to add consistent spacing.</p>
+
+<p>Specify the spacing amount in vertical pixels to control the gap size.</p>
+</div>
+
+<% content_for :html, flush: true do %>
+<!-- compiled output -->
+<p>Some text...</p>
+<table class="spacer">
+  <tbody>
+    <tr>
+      <td height="16" style="font-size:16px;line-height:16px;">&nbsp;</td>
+    </tr>
+  </tbody>
+</table>
+<p>Another paragraph</p>
+<% end %>
+<% content_for :erb, flush: true do %>
+<p>Some text....</p>
+<%%= spacer(16) %>
+<p>Another paragraph</p>
+<% end %>
+
+<%= render_snippet active_tab: :erb %>
+
+<%= system_pagination(prev_path: systems_helpers_email_callout_path, prev_text: "Email Callout", next_path: systems_helpers_demo_avatar_path, next_text: "Demo Avatar") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Email Spacer", "#spacer" %>
+  <% end %>
+<% end %>

data/app/views/railsui/systems/icons.html.erb

@@ -0,0 +1,6 @@
+<% content_for :header_description do %>
+  <p>Icons in two flavors. Click-to-copy and be on your way.</p>
+<% end %>
+
+<%= render "railsui/shared/header" %>
+<%= render "railsui/themes/#{Railsui.config.theme}/icons", cached: true %>

data/app/views/railsui/systems/mailers/devise.html.erb

@@ -0,0 +1,2 @@
+<%= render "railsui/shared/header" %>
+<%= render "railsui/themes/#{Railsui.config.theme}/mailers/devise" %>

data/app/views/railsui/systems/mailers/layout.html.erb

@@ -0,0 +1,2 @@
+<%= render "railsui/shared/header" %>
+<%= render "railsui/themes/#{Railsui.config.theme}/mailers/layout" %>

data/app/views/railsui/systems/mailers/minimal.html.erb

@@ -0,0 +1,2 @@
+<%= render "railsui/shared/header" %>
+<%= render "railsui/themes/#{Railsui.config.theme}/mailers/minimal" %>