railsui 3.1.4 → 3.2.0

data/app/views/railsui/themes/corgie/content/table/_comparison.html.erb

@@ -0,0 +1,494 @@
+<div id="table-comparison">
+<%= render layout: example, locals: { heading: "Comparison" } do %>
+
+<div class="overflow-x-auto">
+  <table class="w-full bg-white border border-neutral-200 dark:bg-neutral-800 dark:border-neutral-700 rounded-xl">
+    <thead>
+      <tr class="border-b border-neutral-200 dark:border-neutral-700">
+        <th class="px-6 py-4 font-semibold text-left text-neutral-900 dark:text-white">
+          Features
+        </th>
+        <th class="px-6 py-4 font-semibold text-left text-neutral-900 dark:text-white">
+          Free
+        </th>
+        <th class="px-6 py-4 font-semibold text-left text-neutral-900 dark:text-white">
+          <div class="flex items-center justify-start gap-2">
+            Plus
+            <span class="px-2 py-1 text-xs text-white rounded-3xl bg-neutral-900">Popular</span>
+          </div>
+        </th>
+        <th class="px-6 py-4 font-semibold text-left text-neutral-900 dark:text-white">
+          Pro
+        </th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
+      <tr>
+        <td class="px-6 py-4 font-medium text-left text-neutral-900 dark:text-white">
+          Daily conversations
+        </td>
+        <td class="px-6 py-4 text-left text-neutral-600 dark:text-neutral-400">
+          10
+        </td>
+        <td class="px-6 py-4 text-left text-neutral-600 dark:text-neutral-400">
+          Unlimited
+        </td>
+        <td class="px-6 py-4 text-left text-neutral-600 dark:text-neutral-400">
+          Unlimited
+        </td>
+      </tr>
+
+      <tr class="bg-neutral-50/50 dark:bg-neutral-800/50">
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          AI models
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          Basic
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          Advanced
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          Premium
+        </td>
+      </tr>
+
+      <tr>
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          File upload limit
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          1MB
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          25MB
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          100MB
+        </td>
+      </tr>
+
+      <tr class="bg-neutral-50/50 dark:bg-neutral-800/50">
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          Support
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          Community
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          Priority
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          Dedicated
+        </td>
+      </tr>
+
+      <tr>
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          Conversation history
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+      </tr>
+
+      <tr class="bg-neutral-50/50 dark:bg-neutral-800/50">
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          Export conversations
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          Team collaboration
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+      </tr>
+
+      <tr class="bg-neutral-50/50 dark:bg-neutral-800/50">
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          Advanced analytics
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          Custom integrations
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<% content_for :example, flush: true do %>
+	<%# .html %>
+<% content_for :html, flush: true do %>
+<div class="overflow-x-auto">
+  <table class="w-full bg-white border border-neutral-200 dark:bg-neutral-800 dark:border-neutral-700 rounded-xl">
+    <thead>
+      <tr class="border-b border-neutral-200 dark:border-neutral-700">
+        <th class="px-6 py-4 font-semibold text-left text-neutral-900 dark:text-white">
+          Features
+        </th>
+        <th class="px-6 py-4 font-semibold text-left text-neutral-900 dark:text-white">
+          Free
+        </th>
+        <th class="px-6 py-4 font-semibold text-left text-neutral-900 dark:text-white">
+          <div class="flex items-center justify-start gap-2">
+            Plus
+            <span class="px-2 py-1 text-xs text-white rounded-3xl bg-neutral-900">Popular</span>
+          </div>
+        </th>
+        <th class="px-6 py-4 font-semibold text-left text-neutral-900 dark:text-white">
+          Pro
+        </th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
+      <tr>
+        <td class="px-6 py-4 font-medium text-left text-neutral-900 dark:text-white">
+          Daily conversations
+        </td>
+        <td class="px-6 py-4 text-left text-neutral-600 dark:text-neutral-400">
+          10
+        </td>
+        <td class="px-6 py-4 text-left text-neutral-600 dark:text-neutral-400">
+          Unlimited
+        </td>
+        <td class="px-6 py-4 text-left text-neutral-600 dark:text-neutral-400">
+          Unlimited
+        </td>
+      </tr>
+
+      <tr class="bg-neutral-50/50 dark:bg-neutral-800/50">
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          AI models
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          Basic
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          Advanced
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          Premium
+        </td>
+      </tr>
+
+      <tr>
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          File upload limit
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          1MB
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          25MB
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          100MB
+        </td>
+      </tr>
+
+      <tr class="bg-neutral-50/50 dark:bg-neutral-800/50">
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          Support
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          Community
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          Priority
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          Dedicated
+        </td>
+      </tr>
+
+      <tr>
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          Conversation history
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+      </tr>
+
+      <tr class="bg-neutral-50/50 dark:bg-neutral-800/50">
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          Export conversations
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          Team collaboration
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+      </tr>
+
+      <tr class="bg-neutral-50/50 dark:bg-neutral-800/50">
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          Advanced analytics
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          Custom integrations
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<% end %>
+
+	<%# .erb %>
+<% content_for :erb, flush: true do %>
+<div class="overflow-x-auto">
+  <table class="w-full bg-white border border-neutral-200 dark:bg-neutral-800 dark:border-neutral-700 rounded-xl">
+    <thead>
+      <tr class="border-b border-neutral-200 dark:border-neutral-700">
+        <th class="px-6 py-4 font-semibold text-left text-neutral-900 dark:text-white">
+          Features
+        </th>
+        <th class="px-6 py-4 font-semibold text-left text-neutral-900 dark:text-white">
+          Free
+        </th>
+        <th class="px-6 py-4 font-semibold text-left text-neutral-900 dark:text-white">
+          <div class="flex items-center justify-start gap-2">
+            Plus
+            <span class="px-2 py-1 text-xs text-white rounded-3xl bg-neutral-900">Popular</span>
+          </div>
+        </th>
+        <th class="px-6 py-4 font-semibold text-left text-neutral-900 dark:text-white">
+          Pro
+        </th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
+      <tr>
+        <td class="px-6 py-4 font-medium text-left text-neutral-900 dark:text-white">
+          Daily conversations
+        </td>
+        <td class="px-6 py-4 text-left text-neutral-600 dark:text-neutral-400">
+          10
+        </td>
+        <td class="px-6 py-4 text-left text-neutral-600 dark:text-neutral-400">
+          Unlimited
+        </td>
+        <td class="px-6 py-4 text-left text-neutral-600 dark:text-neutral-400">
+          Unlimited
+        </td>
+      </tr>
+
+      <tr class="bg-neutral-50/50 dark:bg-neutral-800/50">
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          AI models
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          Basic
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          Advanced
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          Premium
+        </td>
+      </tr>
+
+      <tr>
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          File upload limit
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          1MB
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          25MB
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          100MB
+        </td>
+      </tr>
+
+      <tr class="bg-neutral-50/50 dark:bg-neutral-800/50">
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          Support
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          Community
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          Priority
+        </td>
+        <td class="px-6 py-4 text-neutral-600 dark:text-neutral-400">
+          Dedicated
+        </td>
+      </tr>
+
+      <tr>
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          Conversation history
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+      </tr>
+
+      <tr class="bg-neutral-50/50 dark:bg-neutral-800/50">
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          Export conversations
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          Team collaboration
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+      </tr>
+
+      <tr class="bg-neutral-50/50 dark:bg-neutral-800/50">
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          Advanced analytics
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="px-6 py-4 font-medium text-neutral-900 dark:text-white">
+          Custom integrations
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "x-mark", class: "size-5 text-neutral-400" %>
+        </td>
+        <td class="px-6 py-4 text-center">
+          <%%= icon "check", class: "size-5 text-green-500" %>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/content/typography/_blockquote.html.erb

@@ -0,0 +1,41 @@
+<div id="typography-blockquote">
+<%= render layout: example, locals: { heading: "Blockquote", section: "Typography" } do %>
+
+<figure class="font-tiktok pl-6 border-l-2 border-neutral-200 dark:border-neutral-600 py-1">
+  <blockquote class="text-xl font-light mb-1 text-neutral-600 dark:text-neutral-300">
+    <p>A well-known quote, contained in a blockquote element.</p>
+  </blockquote>
+  <figcaption class="text-neutral-600 text-sm dark:text-neutral-500">
+    Someone famous in <cite title="Source Title">Source Title</cite>
+  </figcaption>
+</figure>
+
+<%# .html %>
+<% content_for :html, flush: true do %>
+<figure class="pl-6 border-l-2 border-neutral-200 dark:border-neutral-600 py-1">
+  <blockquote class="text-xl font-light mb-1 text-neutral-800 dark:text-neutral-100">
+  <p>A well-known quote, contained in a blockquote element.</p>
+  </blockquote>
+  <figcaption class="text-neutral-500 text-sm dark:text-neutral-300">Someone famous in <cite title="Source Title">Source Title</cite>
+  </figcaption>
+</figure>
+<% end %>
+
+<% content_for :example, flush: true do %>
+  <%# .erb %>
+<% content_for :erb, flush: true do %>
+<%% tag.figure class: "pl-6 border-l-2 border-neutral-200 dark:border-neutral-600 py-1" do %>
+  <%%= tag.blockquote class: "text-xl font-light mb-1 text-neutral-800 dark:text-neutral-100" do %>
+    <%%= tag.p "A well-known quote, contained in a blockquote element." %>
+  <%% end %>
+  <%%= tag.figcaption class: "text-neutral-600 text-sm dark:text-neutral-500" do %>
+    Someone famous in
+    <%%= tag.cite "Source Title", title: "Source Title" %>
+  <%% end %>
+<%% end %>
+<% end %>
+
+  <%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/content/typography/_display_headings.html.erb

@@ -0,0 +1,70 @@
+<div id="typography-display-headings" %>
+<%= render layout: example, locals: { heading: "Display headings", section: "Typography" } do %>
+<div class="mb-4">
+  <h1 class="display-1">A quick brown fox jumps over the lazy dog.</h1>
+  <%= help_text do %>
+    <p>h1</p>
+  <% end %>
+</div>
+
+<div class="mb-4">
+  <h2 class="display-2">A quick brown fox jumps over the lazy dog.</h2>
+  <%= help_text do %>
+    <p>h2</p>
+  <% end %>
+</div>
+
+<div class="mb-4">
+  <h3 class="display-3">A quick brown fox jumps over the lazy dog.</h3>
+  <%= help_text do %>
+    <p>h3</p>
+  <% end %>
+</div>
+
+<div class="mb-4">
+  <h4 class="display-4">A quick brown fox jumps over the lazy dog.</h4>
+  <%= help_text do %>
+    <p>h4</p>
+  <% end %>
+</div>
+
+<div class="mb-4">
+  <h5 class="display-5">A quick brown fox jumps over the lazy dog.</h5>
+  <%= help_text do %>
+    <p>h5</p>
+  <% end %>
+</div>
+
+<div class="mb-4">
+  <h6 class="display-6">A quick brown fox jumps over the lazy dog.</h6>
+  <%= help_text do %>
+    <p>h6</p>
+  <% end %>
+</div>
+
+
+<% content_for :example, flush: true do %>
+<%# .html %>
+<% content_for :html, flush: true do %>
+<h1 class="display-1">A quick brown fox jumps over the lazy dog.</h1>
+<h2 class="display-2">A quick brown fox jumps over the lazy dog.</h2>
+<h3 class="display-3">A quick brown fox jumps over the lazy dog.</h3>
+<h4 class="display-4">A quick brown fox jumps over the lazy dog.</h4>
+<h5 class="display-5">A quick brown fox jumps over the lazy dog.</h5>
+<h6 class="display-6">A quick brown fox jumps over the lazy dog.</h6>
+<% end %>
+
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<%%= content_tag :h1, "A quick brown fox jumps over the lazy dog.", class: "display-1" %>
+<%%= content_tag :h2, "A quick brown fox jumps over the lazy dog.", class: "display-2" %>
+<%%= content_tag :h3, "A quick brown fox jumps over the lazy dog.", class: "display-3" %>
+<%%= content_tag :h4, "A quick brown fox jumps over the lazy dog.", class: "display-4" %>
+<%%= content_tag :h5, "A quick brown fox jumps over the lazy dog.", class: "display-5" %>
+<%%= content_tag :h6, "A quick brown fox jumps over the lazy dog.", class: "display-6" %>
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/content/typography/_fonts.html.erb

@@ -0,0 +1,30 @@
+<div id="typography-fonts">
+  <div class="my-6">
+    <%= render "railsui/shared/code_example_heading", title: "Typography", subtitle: "Fonts" %>
+  </div>
+
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
+    <div>
+      <h4 class="font-medium mb-3">Headings</h3>
+      <p>
+        <%= link_to "https://fonts.google.com/specimen/TikTok+Sans", target: :_blank, class: button_classes(variant: "white") do %>
+          <span>TikTok Sans</span>
+          <%= icon "arrow-up-right", class:  "size-3" %>
+        <% end %>
+      </p>
+    </div>
+    <div>
+      <h4 class="font-medium mb-3">Body</h4>
+      <p>
+        <%= link_to "https://fonts.google.com/specimen/TikTok+Sans", class: button_classes(variant: "white") do %>
+          <span>TikTok Sans</span>
+          <%= icon "arrow-up-right", class:  "size-3" %>
+        <% end %>
+      </p>
+    </div>
+  </div>
+
+  <div class="prose-sm prose-neutral dark:prose-invert">
+    <p><strong>Tip</strong>: To change fonts, you'll need to reference them in both <br /><code>app/views/rui/shared/_fonts.html.erb</code> and <code>app/assets/stylesheets/railsui/theme.css</code>.</p>
+  </div>
+</div>