railsui 3.1.0

data/app/views/railsui/themes/hound/scaffolds/_new.html.erb

@@ -0,0 +1,97 @@
+<div id="scaffolds-new">
+<%= render layout: example, locals: { heading: "New", section: "Scaffolds" } do %>
+
+<%= render preview('gray') do %>
+<div class="max-w-3xl mx-auto px-4 my-16">
+  <div class="mb-4 pb-6 border-b border-gray-200/90 dark:border-slate-700">
+    <nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-500 dark:text-slate-200 text-sm">
+      <ol class="flex flex-wrap items-center space-x-3">
+        <li>
+          <a class="hover:underline hover:text-slate-600 dark:hover:text-slate-400" href="#">Posts</a>
+        </li>
+        <li class="flex space-x-3">
+          <div class="flex items-center">
+            <span class="text-slate-300 dark:text-slate-500">/</span>
+          </div>
+          <span class="text-primary-600 dark:text-primary-500" aria-current="page">New</span>
+        </li>
+      </ol>
+    </nav>
+    <h1 class="h2">New Post</h1>
+    </div>
+    <div>
+      <form action="#" accept-charset="UTF-8" method="post">
+      <input type="hidden" name="authenticity_token" value="#" autocomplete="off">
+
+      <div class="form-group">
+        <label class="form-label" for="post_title">Title</label>
+        <input class="form-input" type="text" name="post[title]" id="post_title">
+      </div>
+
+      <div class="form-group">
+        <label class="form-label" for="post_content">Content</label>
+        <textarea class="form-input" name="post[content]" id="post_content"></textarea>
+      </div>
+
+      <div class="flex items-center justify-between flex-wrap">
+        <div class="sm:flex-1 sm:mb-0 mb-6">
+          <input type="submit" name="commit" value="Create Post" class="btn btn-primary">
+        </div>
+          <a class="btn btn-light" href="#">Cancel</a>
+      </div>
+    </form>
+  </div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<div class="max-w-3xl mx-auto px-4 my-16">
+  <div class="mb-4 pb-6 border-b border-gray-200/90 dark:border-slate-700">
+    <nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-500 dark:text-slate-200 text-sm">
+      <ol class="flex flex-wrap items-center space-x-3">
+        <li>
+          <%%= link_to "Posts", posts_path, class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400" %>
+        </li>
+        <li class="flex space-x-3">
+          <div class="flex items-center">
+            <span class="text-slate-300 dark:text-slate-500">/</span>
+          </div>
+          <span class="text-primary-600 dark:text-primary-500" aria-current="page">New</span>
+        </li>
+      </ol>
+    </nav>
+    <h1 class="h2">New Post</h1>
+  </div>
+
+  <div>
+    <%%= render "form", post: @post %>
+  </div>
+</div>
+<% end %>
+
+<%# .haml %>
+<% content_for :haml, flush: true do %>
+.max-w-3xl.mx-auto.px-4.my-16
+  .mb-4.pb-6.border-b.dark:border-slate-700
+    %nav.my-6.font-medium.flex.text-slate-500.dark:text-slate-200.text-sm{"aria-label" => "breadcrumb"}
+      %ol.flex.flex-wrap.items-center.space-x-3
+        %li
+          = link_to "Posts", posts_path, class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400"
+        %li.flex.space-x-3
+          .flex.items-center
+            %span.text-slate-300.dark:text-slate-500 /
+          %span.text-primary-600.dark:text-primary-500{"aria-current" => "page"} New
+    %h1.h2 New Post
+  %div
+    = render "form", post: @post
+<% end %>
+
+<% content_for :ruby do %>
+
+<% end %>
+<%= render_snippet active_tab: "erb", erb_filename: "new.html.erb", haml_filename: "new.haml.erb" %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/hound/scaffolds/_partial.html.erb

@@ -0,0 +1,72 @@
+<div id="scaffolds-partial">
+<%= render layout: example, locals: { heading: "Partial", section: "Scaffolds" } do %>
+
+<%= render preview('gray') do %>
+<article id="post_1" class="py-6 prose dark:prose-invert">
+  <div>
+    <p class="mb-0 font-semibold">
+      Title
+    </p>
+    <p class="my-0">
+      Example post title 2
+    </p>
+  </div>
+  <div>
+    <p class="mb-0 font-semibold">
+      Content
+    </p>
+    <p class="my-0">
+      Example post content 2
+    </p>
+  </div>
+  <time class="text-slate-600 dark:text-slate-400 text-xs mt-2" datetime="February 23, 2023 12:37">Created 1 minute ago</time>
+</article>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<article id="<%%= dom_id post %>" class="py-6 prose dark:prose-invert">
+  <div>
+    <p class="mb-0 font-semibold">
+      Title
+    </p>
+    <p class="mt-0">
+      <%%= post.title %>
+    </p>
+  </div>
+  <div>
+    <p class="mb-0 font-semibold">
+      Content
+    </p>
+    <p class="my-0">
+      <%%= post.content %>
+    </p>
+  </div>
+  <time class="text-slate-600 dark:text-slate-400 text-xs mt-2" datetime="<%%= post.created_at.to_formatted_s(:long) %>">Created <%%= time_ago_in_words(post.created_at) + " ago" %></time>
+</article>
+<% end %>
+
+<%# .haml %>
+<% content_for :haml, flush: true do %>
+%article.py-6.prose.dark:prose-invert{id: "#{dom_id post }"}
+  %div
+    %p.mb-0.font-semibold
+      Title
+    %p.mt-0
+      = post.title
+  %div
+    %p.mb-0.font-semibold
+      Content
+    %p.my-0
+      = post.content
+  %time.text-slate-600.dark:text-slate-400.text-xs.mt-2{datetime: "#{post.created_at.to_formatted_s(:long)}"} Created
+    = time_ago_in_words(post.created_at) + " ago"
+<% end %>
+<% content_for :ruby do %>
+
+<% end %>
+<%= render_snippet active_tab: "erb", erb_filename: "_post.html.erb", haml_filename: "_post.haml.erb" %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/hound/scaffolds/_show.html.erb

@@ -0,0 +1,105 @@
+<div id="scaffolds-show">
+<%= render layout: example, locals: { heading: "Show", section: "Scaffolds" } do %>
+<%= render preview('gray') do %>
+<div class="max-w-3xl mx-auto px-4 my-16">
+  <div class="pb-6 border-b border-gray-200/90 dark:border-slate-700">
+    <nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-500 dark:text-slate-200 text-sm">
+      <ol class="flex flex-wrap items-center gap-3">
+        <li>
+          <a href="#" class="hover:underline hover:text-slate-600 dark:hover:text-slate-400">Posts</a>
+        </li>
+        <li class="flex gap-3">
+          <div class="flex items-center">
+            <span class="text-slate-300 dark:text-slate-500">/</span>
+          </div>
+          <span class="text-primary-600 dark:text-primary-500" aria-current="page">
+            #1
+          </span>
+        </li>
+      </ol>
+    </nav>
+    <div class="flex items-center justify-between">
+      <h1 class="h2 flex-1">post #1</h1>
+      <a href="#" class="btn btn-light">Edit</a>
+    </div>
+  </div>
+
+  <article id="post_2" class="py-6 prose dark:prose-invert">
+    <div>
+      <p class="mb-0 font-semibold">
+        Title
+      </p>
+      <p class="my-0">
+        Example post title 2
+      </p>
+    </div>
+    <div>
+      <p class="mb-0 font-semibold">
+        Content
+      </p>
+      <p class="my-0">
+        Example post content 2
+      </p>
+    </div>
+    <time class="text-slate-600 dark:text-slate-400 text-xs mt-2" datetime="February 23, 2023 12:37">Created 1 minute ago</time>
+  </article>
+</div>
+<% end %>
+
+
+<% content_for :example, flush: true do %>
+
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<div class="max-w-3xl mx-auto px-4 my-16">
+  <div class="pb-6 border-b border-gray-200/90 dark:border-slate-700">
+    <nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-500 dark:text-slate-200 text-sm">
+      <ol class="flex flex-wrap items-center gap-3">
+        <li>
+          <%%= link_to "Posts", posts_path, class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400" %>
+        </li>
+        <li class="flex gap-3">
+          <div class="flex items-center">
+            <span class="text-slate-300 dark:text-slate-500">/</span>
+          </div>
+          <span class="text-primary-600 dark:text-primary-500" aria-current="page">
+            #<%%= @post.id %>
+          </span>
+        </li>
+      </ol>
+    </nav>
+    <div class="flex items-center justify-between">
+      <h1 class="h2 flex-1">post #<%%= @post.id %></h1>
+      <%%= link_to "Edit", edit_post_path(@post), class: "btn btn-light" %>
+    </div>
+  </div>
+  <%%= render @post %>
+</div>
+<% end %>
+
+<%# .haml %>
+<% content_for :haml, flush: true do %>
+.max-w-3xl.mx-auto.px-4.my-16
+  .pb-6.border-b.dark:border-slate-700{class: "border-gray-200/90"}
+    %nav.my-6.font-medium.flex.text-slate-500.dark:text-slate-200.text-sm{"aria-label" => "breadcrumb"}
+      %ol.flex.flex-wrap.items-center.gap-3
+        %li
+          = link_to "Posts", posts_path, class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400"
+        %li.flex.gap-3
+          .flex.items-center
+            %span.text-slate-300.dark:text-slate-500 /
+          %span.text-primary-600.dark:text-primary-500{"aria-current" => "page"}
+            \##{@post.id}
+    .flex.items-center.justify-between
+      %h1.h2.flex-1
+        post ##{@post.id}
+      = link_to "Edit", edit_post_path(@post), class: "btn btn-light"
+  = render @post
+<% end %>
+<% content_for :ruby do %>
+
+<% end %>
+<%= render_snippet active_tab: "erb", erb_filename: "show.html.erb", haml_filename: "show.haml.erb" %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/shepherd/_components.html.erb

@@ -0,0 +1,8 @@
+<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 my-8 pb-10">
+
+  <% components = ["Accordions", "Alerts", "Badges", "Breadcrumbs", "Buttons", "Cards", "Datalists", "Dropdowns", "Flash", "Modals", "Navigation", "Pagination", "Tabs", "Toasts", "Tooltips"] %>
+
+  <% components.each do |component| %>
+    <%= render "railsui/shared/grid_item", path: eval("systems_components_#{component.downcase}_path"), title: component, description: "Documentation and examples for the #{component.downcase.singularize} component." %>
+  <% end %>
+</div>

data/app/views/railsui/themes/shepherd/_content.html.erb

@@ -0,0 +1,11 @@
+<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 my-8">
+  <%= render "railsui/shared/grid_item", path: systems_content_typography_path, title: "Typography", description: "Documentation and examples for typography and basic content." %>
+
+  <%= render "railsui/shared/grid_item", path: systems_content_tables_path, title: "Tables", description: "Documentation and examples for opt-in styling of tables." %>
+
+  <%= render "railsui/shared/grid_item", path: systems_content_images_path, title: "Images", description: "A starting point for styling and displaying images." %>
+
+  <%= render "railsui/shared/grid_item", path: systems_pages_path, title: "Pages", description: "Pages built using the #{Railsui.config.theme} theme." %>
+
+  <%= render "railsui/shared/grid_item", path: systems_scaffolds_path, title: "Scaffolds", description: "Pre-designed scaffold templates." %>
+</div>

data/app/views/railsui/themes/shepherd/_fonts.html.erb

@@ -0,0 +1,4 @@
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800&display=swap"
+    rel="stylesheet">

data/app/views/railsui/themes/shepherd/_forms.html.erb

@@ -0,0 +1,17 @@
+<%= render layout: "railsui/shared/linkables" do %>
+  <%= render "railsui/shared/linkable", path: systems_forms_input_path, title: "Input", description: "The building blocks of any given form." %>
+
+  <%= render "railsui/shared/linkable", path: systems_forms_input_group_path, title: "Input Group", description: "Group inputs together for tailored user experiences." %>
+
+  <%= render "railsui/shared/linkable", path: systems_forms_select_path, title: "Select", description: "Fancy select fields ready for action." %>
+
+  <%= render "railsui/shared/linkable", path: systems_forms_checkbox_path, title: "Checkbox", description: "Enhance your forms with additional controls." %>
+
+  <%= render "railsui/shared/linkable", path: systems_forms_radio_path, title: "Radio", description: "Enhance your forms with additional controls." %>
+
+  <%= render "railsui/shared/linkable", path: systems_forms_radio_path, title: "Switch", description: "Enhance your forms with additional controls." %>
+
+  <%= render "railsui/shared/linkable", path: systems_forms_radio_path, title: "ActionText", description: "Custom-themed ActionText UI for your rich text needs." %>
+
+  <%= render "railsui/shared/linkable", path: systems_forms_validation_path, title: "Validation", description: "Error handling UI is taken care of with Rails UI." %>
+<% end %>

data/app/views/railsui/themes/shepherd/_icons.html.erb

@@ -0,0 +1,125 @@
+
+<div id="icons-overview">
+<div class="prose prose-neutral mt-6 max-w-full dark:prose-invert prose-a:font-semibold prose-a:underline">
+  <p><%= link_to "Heroicons", "https://heroicons.com/", target: :_blank %> are the default icons of choice for Rails UI. We chose these icons since they are open sourced, updated regularly, and cover a vast set of scenarios in the design world.</p>
+</div>
+
+<%= render "railsui/shared/usage_guide", title: "Icon usage guide" do %>
+
+<h3>Why SVG icons?</h3>
+
+<p>There are a lot of pros to using SVG icons rather than bitmap or font-based icons. The summarized take is they are more accessible, have lighter file sizes, and can scale infinitely, which is excellent for retina screens.</p>
+
+<p>The main downside is the way we have to render them in order to have more control. SVGs are essentially vector code and can be complex and cumbersome to drop into a new view whenever you require one. Because of this we bundled another gem called <a href="https://github.com/getrailsui/railsui_icon" target="_blank">railsui_icon</a> into Rails UI that solves for icons.</p>
+
+<h3>Dependencies</h3>
+
+<p><a href="https://github.com/getrailsui/railsui_icon" target="_blank">railsui_icon</a> contains all of <a href="https://heroicons.com">heroicons.com</a> with plans to expand. The gem is already included as a dependency for each Rails UI installation.</p>
+
+<h4 class="dark:text-zinc-200">Options</h4>
+<ul>
+  <li>
+    <code>:variant</code> &mdash; Pass a style of icon you would like to render. (Defaults to <code>:outline</code>. Options include <code>:outline</code>,<code>:solid</code>, <code>:micro</code>, and <code>:mini</code>).
+  </li>
+  <li>
+    <code>:class</code> &mdash; Add CSS classes here. <code>stroke-current</code> and <code>stroke-fill</code> are appended by default based on the <code>:variant</code> option.
+  </li>
+  <li>
+    <code>:custom_path</code> &mdash; Pass a custom path to an icon. Treat paths as relative. A forward slash prefix is required: <code>/icon_name.svg</code>.
+  </li>
+</ul>
+
+<h3>Usage</h3>
+
+<p>Using and rendering a new icon is quite simple and doesn't pollute your markup. The default style is outline but you can render different variants as necessary. </p>
+
+<div class="not-prose">
+<% content_for :bash, flush: true do %>
+
+<% end %>
+
+<% content_for :ruby, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+  <%%= icon "academic-cap", class: "w-5 h-5 text-indigo-600" %>
+<% end %>
+<%= render_snippet active_tab: "erb", erb_filename: "index.html.erb" %>
+  </div>
+
+  <h3>Custom icons</h3>
+  <p>Need to add some of your own icons? You can add those to <code>app/assets/images</code>.</p>
+
+  <p>If you require something more custom, use the <code>custom_path</code> option to pass a unique path to the helper for rendering. Treat paths as relative. A forward slash prefix is required: <code>/icon_name.svg</code>.</p>
+
+<div class="not-prose">
+<% content_for :bash, flush: true do %>
+
+<% end %>
+
+<% content_for :ruby, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+  <%%= icon "eye-close", custom_path: "/eye-close.svg", class: "w-10 h-10 stroke-current text-pink-400" %>
+<% end %>
+<%= render_snippet active_tab: "erb" %>
+</div>
+<% end %>
+</div>
+
+<div id="icons-solid" class="my-10">
+  <div class="mb-6">
+    <%= render "railsui/shared/code_example_heading", title: "Icons", subtitle: "Solid" %>
+  </div>
+
+    <div class="grid grid-cols-4 md:grid-cols-5 lg:grid-cols-7 items-center justify-between sm:gap-4 gap-2 w-full">
+    <% @icon_names.each do |icon_name| %>
+      <div>
+        <div class="flex items-center justify-center size-20 rounded border border-zinc-300 shadow-xs bg-white relative group hover:shadow-primary-500/20 hover:border-primary-300 dark:bg-neutral-900 dark:border-neutral-700/80 dark:shadow-neutral-500/20" data-controller="railsui-clipboard">
+          <%= icon icon_name, class: "fill-current text-zinc-500 w-auto h-6 group-hover:transform group-hover:scale-125 transition ease-in-out duration-300 group-hover:text-primary-500 dark:text-white dark:group-hover:text-white", variant: :solid %>
+          <button class="block w-5 h-5 absolute right-1 bottom-1" type="button" data-action="click->railsui-clipboard#copy" aria-label="Copy icon label">
+            <%= icon "square-2-stack", class: "w-5 dark:text-zinc-200 text-zinc-400 opacity-0 group-hover:opacity-100 transition ease-in-out duration-300 group-hover:text-primary-500 dark:group-hover:text-primary-300" %>
+          </button>
+          <span class="hidden" data-railsui-clipboard-target="content"><%= icon_name %></span>
+        </div>
+        <div class="my-2 text-xs text-neutral-600 dark:text-neutral-100 truncate sm:max-w-[100px]"><%= icon_name %></div>
+      </div>
+    <% end %>
+  </div>
+</div>
+
+<div id="icons-outline" class="my-10">
+  <div class="mb-6">
+    <%= render "railsui/shared/code_example_heading", title: "Icons", subtitle: "Outline" %>
+  </div>
+
+    <div class="grid grid-cols-4 md:grid-cols-5 lg:grid-cols-7 items-center justify-between sm:gap-4 gap-2 w-full">
+    <% @icon_names.each do |icon_name| %>
+      <div>
+        <div class="flex items-center justify-center size-20 rounded border border-zinc-300 shadow-xs bg-white relative group hover:shadow-primary-500/20 hover:border-primary-300 dark:bg-neutral-900 dark:border-neutral-700/80 dark:shadow-neutral-500/20" data-controller="railsui-clipboard">
+          <%= icon icon_name, class: "stroke-current text-zinc-500 w-auto h-6 group-hover:transform group-hover:scale-125 transition ease-in-out duration-300 group-hover:text-primary-500 dark:text-white dark:group-hover:text-white" %>
+          <button class="block w-5 h-5 absolute right-1 bottom-1" type="button" data-action="click->railsui-clipboard#copy" aria-label="Copy icon label">
+            <%= icon "square-2-stack", class: "w-5 dark:text-zinc-200 text-zinc-400 opacity-0 group-hover:opacity-100 transition ease-in-out duration-300 group-hover:text-primary-500 dark:group-hover:text-primary-300" %>
+          </button>
+          <span class="hidden" data-railsui-clipboard-target="content">"<%= icon_name %></span>
+        </div>
+        <div class="my-2 text-xs text-neutral-600 dark:text-neutral-100 truncate sm:max-w-[100px]"><%= icon_name %></div>
+      </div>
+    <% end %>
+    </div>
+</div>
+
+<% unless local_assigns[:hide_pagination] %>
+<%= system_pagination(prev_path: systems_content_table_path, prev_text: "Table", next_path: systems_content_image_path, next_text: "Image") %>
+<% end %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Overview", "#icons-overview" %>
+    <%= component_link "Solid", "#icons-solid" %>
+		<%= component_link "Outline", "#icons-outline" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/shepherd/_nav.html.erb

@@ -0,0 +1,169 @@
+<div class="text-[14px] relative pb-4 pl-4">
+  <ul>
+    <li>
+      <p class="font-medium px-3 py-2 dark:text-neutral-200 mb-1 text-[14px]">Content</p>
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+        <%= system_nav_item(label: "Typography", path:  systems_content_typography_path) %>
+
+        <%= system_nav_item(label: "Table", path:  systems_content_table_path) %>
+
+        <%= system_nav_item(label: "Icon", path:  systems_icons_path) %>
+
+        <%= system_nav_item(label: "Image", path:  systems_content_image_path) %>
+
+        <%= system_nav_item(label: "Scaffold", path:  systems_scaffolds_path) %>
+      </ul>
+    </li>
+    <li>
+      <p class="font-medium px-3 py-2 dark:text-neutral-200 mt-4 mb-1 text-[14px]">Forms</p>
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+
+        <%= system_nav_item(label: "Input", path:  systems_forms_input_path) %>
+
+        <%= system_nav_item(label: "Input Group", path:  systems_forms_input_group_path) %>
+
+        <%= system_nav_item(label: "Select", path:  systems_forms_select_path) %>
+
+        <%= system_nav_item(label: "Checkbox", path:  systems_forms_checkbox_path) %>
+
+        <%= system_nav_item(label: "Radio", path:  systems_forms_radio_path) %>
+
+        <%= system_nav_item(label: "Switch", path:  systems_forms_switch_path) %>
+
+        <%= system_nav_item(label: "ActionText", path:  systems_forms_action_text_path) %>
+
+        <%= system_nav_item(label: "Validation", path:  systems_forms_validation_path) %>
+      </ul>
+    </li>
+    <li>
+      <p class="font-medium px-3 py-2 dark:text-neutral-200 mt-4 mb-1 text-[14px]">Components</p>
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+
+        <%= system_nav_item(label: "Accordion", path:  systems_components_accordion_path) %>
+
+        <%= system_nav_item(label: "Alert", path:  systems_components_alert_path) %>
+
+        <%= system_nav_item(label: "Avatar", path:  systems_components_avatar_path) %>
+
+        <%= system_nav_item(label: "Badge", path:  systems_components_badge_path) %>
+
+        <%= system_nav_item(label: "Breadcrumb", path:  systems_components_breadcrumb_path) %>
+
+        <%= system_nav_item(label: "Button", path:  systems_components_button_path) %>
+
+        <%= system_nav_item(label: "Card", path:  systems_components_card_path) %>
+
+        <%= system_nav_item(label: "Combobox", path:  systems_components_combobox_path) %>
+
+        <%= system_nav_item(label: "Datalist", path:  systems_components_datalist_path) %>
+
+        <%= system_nav_item(label: "Dropdown", path:  systems_components_dropdown_path) %>
+
+        <%= system_nav_item(label: "Flash", path:  systems_components_flash_path) %>
+
+        <%= system_nav_item(label: "Modal", path:  systems_components_modal_path) %>
+
+        <%= system_nav_item(label: "Navigation", path:  systems_components_navigation_path) %>
+
+        <%= system_nav_item(label: "Pagination", path:  systems_components_pagination_path) %>
+
+        <%= system_nav_item(label: "Tab", path:  systems_components_tab_path) %>
+
+        <%= system_nav_item(label: "Toast", path:  systems_components_toast_path) %>
+
+        <%= system_nav_item(label: "Tooltip", path:  systems_components_tooltip_path) %>
+      </ul>
+    </li>
+
+    <li>
+      <p class="font-medium px-3 py-2 dark:text-neutral-200 mt-4 mb-1 text-[14px]">Authentication</p>
+
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+        <%= system_nav_item(label: "Overview", path:  systems_authentication_overview_path) %>
+      </ul>
+
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+        <details class="marker:content-[''] group" <%= "open" if controller_name == "devise" %>>
+          <summary class="py-2 px-3 hover:bg-neutral-100/80 flex items-center justify-between dark:hover:bg-neutral-700/80">
+            <p class="font-medium">Devise</p>
+            <%= icon "plus", class: "size-4 stroke-neutral-400 group-open:hidden" %>
+            <%= icon "minus", class: "size-4 stroke-neutral-400 hidden group-open:block" %>
+          </summary>
+          <ul class="ml-2">
+            <%= system_nav_item(label: "Overview", path:  systems_authentication_devise_overview_path) %>
+
+            <%= system_nav_item(label: "Sign up", path:  systems_authentication_devise_signup_path) %>
+
+            <%= system_nav_item(label: "Sign in", path:  systems_authentication_devise_signin_path) %>
+
+            <%= system_nav_item(label: "Change password", path:  systems_authentication_devise_change_password_path) %>
+
+            <%= system_nav_item(label: "Reset password", path: systems_authentication_devise_reset_password_path) %>
+
+            <%= system_nav_item(label: "Confirmation", path:  systems_authentication_devise_confirmation_path) %>
+
+            <%= system_nav_item(label: "Edit account", path:  systems_authentication_devise_edit_path) %>
+
+            <%= system_nav_item(label: "Unlock", path:  systems_authentication_devise_unlocks_path) %>
+          </ul>
+        </details>
+
+        <details class="marker:content-[''] group" <%= "open" if controller_name == "static" %>>
+          <summary class="py-2 px-3 hover:bg-neutral-100/80 flex items-center justify-between dark:hover:bg-neutral-700/80">
+            <p class="font-medium">Static</p>
+            <%= icon "plus", class: "size-4 stroke-neutral-400 group-open:hidden" %>
+            <%= icon "minus", class: "size-4 stroke-neutral-400 hidden group-open:block" %>
+          </summary>
+          <ul class="ml-2">
+            <%= system_nav_item(label: "Overview", path:  systems_authentication_static_overview_path) %>
+
+            <%= system_nav_item(label: "Sign up", path:  systems_authentication_static_signup_path) %>
+
+            <%= system_nav_item(label: "Sign in", path:  systems_authentication_static_signin_path) %>
+
+            <%= system_nav_item(label: "Change password", path:  systems_authentication_static_change_password_path) %>
+
+            <%= system_nav_item(label: "Reset password", path: systems_authentication_static_reset_password_path) %>
+
+            <%= system_nav_item(label: "Confirmation", path:  systems_authentication_static_confirmation_path) %>
+
+            <%= system_nav_item(label: "Edit account", path:  systems_authentication_static_edit_path) %>
+
+            <%= system_nav_item(label: "Unlock", path:  systems_authentication_static_unlocks_path) %>
+          </ul>
+        </details>
+      </ul>
+    </li>
+
+    <li>
+      <p class="font-medium px-3 py-2 dark:text-neutral-200 mt-4 mb-1 text-[14px]">Mailers</p>
+
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+        <%= system_nav_item(label: "Overview", path:  systems_mailers_overview_path) %>
+
+        <%= system_nav_item(label: "Layout", path:  systems_mailers_layout_path) %>
+
+        <%= system_nav_item(label: "Minimal", path:  systems_mailers_minimal_path) %>
+
+        <%= system_nav_item(label: "Promotion", path:  systems_mailers_promotion_path) %>
+
+        <%= system_nav_item(label: "Transactional", path:  systems_mailers_transactional_path) %>
+
+        <%= system_nav_item(label: "Devise", path:  systems_mailers_devise_path) %>
+      </ul>
+    </li>
+
+    <li>
+      <p class="font-medium px-3 py-2 dark:text-neutral-200 mt-4 mb-1 text-[14px]">Helpers</p>
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+        <%= system_nav_item(label: "Overview", path:  systems_helpers_overview_path) %>
+        <%= system_nav_item(label: "Icon", path:  systems_helpers_icon_path) %>
+        <%= system_nav_item(label: "Nav Link", path:  systems_helpers_nav_link_path) %>
+        <%= system_nav_item(label: "Email Action", path:  systems_helpers_email_action_path) %>
+        <%= system_nav_item(label: "Email Callout", path:  systems_helpers_email_callout_path) %>
+        <%= system_nav_item(label: "Email Spacer", path:  systems_helpers_spacer_path) %>
+        <%= system_nav_item(label: "Demo Avatar", path:  systems_helpers_demo_avatar_path) %>
+        <%= system_nav_item(label: "Rails UI Head", path:  systems_helpers_railsui_head_path) %>
+    </li>
+  </ul>
+</div>

data/app/views/railsui/themes/shepherd/_scaffolds.html.erb

@@ -0,0 +1,42 @@
+
+<div id="scaffolds-overview" class="prose dark:prose-invert my-6 max-w-full">
+  <p>Rails UI supplies pre-designed scaffolds in addition to the Rails defaults. To accomplish this you can run an alternative generator when scaffolding a new resource.</p>
+
+  <h3>Custom scaffold generator</h3>
+  <div class="not-prose">
+    <% content_for :bash, flush: true do %>
+    rails generate railsui:scaffold ModelName
+    <% end %>
+    <%= render_snippet active_tab: "bash" %>
+  </div>
+
+  <p>The custom scaffold generator performs the same function as the default but uses alternative view templates when generating. Below is an example of each template for the <%= Railsui.config.theme.humanize %> theme.</p>
+
+</div>
+
+<% content_for :bash, flush: true do %>
+
+<% end %>
+
+<%= render callout do %>
+  <p><strong>Note</strong>: Changing your Rails UI theme will not automatically update existing scaffolds to match the new theme.</p>
+<% end %>
+
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/scaffolds/index" %>
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/scaffolds/show" %>
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/scaffolds/new" %>
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/scaffolds/edit" %>
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/scaffolds/partial" %>
+
+<%= system_pagination(prev_path: systems_content_image_path, prev_text: "Image", next_path: systems_forms_path, next_text: "Forms") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Overview", "#scaffolds-overview" %>
+    <%= component_link "Index", "#scaffolds-index" %>
+		<%= component_link "Show", "#scaffolds-show" %>
+    <%= component_link "New", "#scaffolds-new" %>
+    <%= component_link "Edit", "#scaffolds-edit" %>
+    <%= component_link "Partial", "#scaffolds-partial" %>
+  <% end %>
+<% end %>