railsui 3.1.4 → 3.2.0

data/app/views/railsui/themes/corgie/components/badge/_tag.html.erb

@@ -0,0 +1,277 @@
+<div id="badge-tag">
+  <%= render layout: example, locals: { heading: "Tag", section: "Badge" } do %>
+
+    <div class="prose prose-neutral dark:prose-invert mb-6">
+      <p>Some applications call for custom tagging pill controls. These a bundled with a control to easily remove on click.</p>
+    </div>
+
+<%= render preview('neutral') do %>
+<div class="flex items-center gap-2 flex-wrap font-tiktok">
+<div class="rounded bg-neutral-100 text-neutral-800 font-medium px-2 py-1 text-xs dark:bg-neutral-500/20 dark:text-neutral-200 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
+  <span class="flex-1">Gray</span>
+  <a href="#" data-controller="prevent" data-action="click->prevent#prevent" class="size-4 rounded hover:bg-neutral-200 dark:hover:bg-neutral-500/40 flex items-center justify-center focus:ring-2 focus:ring-neutral-300/50 group">
+    <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-neutral-700 dark:text-neutral-400 hover:cursor-pointer dark:group-hover:text-neutral-300 group-hover:text-neutral-500" %>
+  </a>
+</div>
+
+<div class="rounded bg-red-100 text-red-800 font-medium px-2 py-1 text-xs dark:bg-red-500/20 dark:text-red-200 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
+  <span class="flex-1">Red</span>
+  <a href="#" data-controller="prevent" data-action="click->prevent#prevent" class="size-4 rounded hover:bg-red-200 dark:hover:bg-red-500/40 flex items-center justify-center focus:ring-2 focus:ring-red-300/50 group">
+    <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-red-500 dark:text-red-500/90 hover:cursor-pointer dark:group-hover:text-red-200 group-hover:text-red-500" %>
+  </a>
+</div>
+
+<div class="rounded bg-orange-100 text-orange-700 font-medium text-xs dark:text-orange-300 px-2 dark:bg-orange-500/20 pl-2 pr-1 py-1  inline-flex items-center justify-between space-x-1">
+  <span class="flex-1">Orange</span>
+  <a href="#" data-controller="prevent" data-action="click->prevent#prevent" class="size-4 rounded hover:bg-orange-200 dark:hover:bg-orange-500/40 flex items-center justify-center focus:ring-2 focus:ring-orange-300/50 group">
+    <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-red-700 dark:text-orange-500 hover:cursor-pointer dark:group-hover:text-orange-200 group-hover:text-orange-500" %>
+  </a>
+</div>
+
+<div class="rounded bg-yellow-100 text-yellow-700 font-medium dark:text-yellow-300 dark:bg-yellow-500/20 px-2 py-1 text-xs  pl-2 pr-1 inline-flex items-center justify-between space-x-1">
+  <span class="flex-1">Yellow</span>
+  <a href="#" data-controller="prevent" data-action="click->prevent#prevent" class="size-4 rounded hover:bg-yellow-200 dark:hover:bg-yellow-500/40 flex items-center justify-center focus:ring-2 focus:ring-yellow-300/50 group">
+    <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-yellow-800 dark:text-yellow-500 hover:cursor-pointer
+group-hover:text-yellow-600
+dark:group-hover:text-yellow-200" %>
+  </a>
+</div>
+
+<div class="rounded bg-green-100 text-green-800 font-medium py-1 text-xs dark:text-green-300 dark:bg-green-500/20 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
+  <span class="flex-1">Green</span>
+  <a href="#" data-controller="prevent" data-action="click->prevent#prevent" class="size-4 rounded hover:bg-green-200/70 dark:hover:bg-green-500/40 flex items-center justify-center focus:ring-2 focus:ring-green-500/20 group">
+    <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-green-700 hover:cursor-pointer
+dark:text-green-400
+dark:group-hover:text-green-200 group-hover:text-green-800" %>
+  </a>
+</div>
+
+<div class="rounded bg-blue-100 text-blue-800 font-medium leading-tight text-xs dark:text-blue-300 dark:bg-blue-500/20 pl-2 pr-1 py-1 inline-flex items-center justify-between space-x-1">
+  <span class="flex-1">Blue</span>
+  <a href="#" data-controller="prevent" data-action="click->prevent#prevent" class="size-4 rounded hover:bg-blue-200/70 dark:hover:bg-blue-500/40 flex items-center justify-center focus:ring-2 focus:ring-blue-500/20 group">
+    <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-blue-800 hover:cursor-pointer group-hover:text-blue-800 dark:text-blue-400
+dark:group-hover:text-blue-200" %>
+  </a>
+</div>
+
+<div class="rounded bg-indigo-100 text-indigo-800 font-medium py-1 leading-tight dark:text-indigo-300 dark:bg-indigo-500/20 pl-2 pr-1 text-xs inline-flex items-center justify-between space-x-1">
+  <span class="flex-1">Indigo</span>
+  <a href="#" data-controller="prevent" data-action="click->prevent#prevent" class="size-4 rounded hover:bg-indigo-200/70 dark:hover:bg-indigo-500/20 flex items-center justify-center focus:ring-2 focus:ring-indigo-500/20 group">
+    <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-indigo-800 hover:cursor-pointer group-hover:text-indigo-800
+dark:text-indigo-400
+dark:group-hover:text-indigo-200" %>
+  </a>
+</div>
+
+<div class="rounded bg-purple-100 text-purple-800 font-medium px-2 py-1 leading-tight text-xs dark:text-purple-300 dark:bg-purple-500/20 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
+  <span class="flex-1">Purple</span>
+  <a href="#" data-controller="prevent" data-action="click->prevent#prevent" class="size-4 rounded hover:bg-purple-200/70 flex items-center justify-center focus:ring-2 focus:ring-purple-500/20 dark:hover:bg-purple-500/20 group">
+    <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-purple-800 hover:cursor-pointer group-hover:text-purple-800 dark:text-purple-400 dark:group-hover:text-purple-200" %>
+  </a>
+</div>
+
+<div class="rounded bg-pink-100 text-pink-800 font-medium px-2 py-1 leading-tight text-xs dark:text-pink-300 dark:bg-pink-500/20 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
+  <span class="flex-1">Pink</span>
+  <a href="#" data-controller="prevent" data-action="click->prevent#prevent" class="size-4 rounded hover:bg-pink-200/70 flex items-center justify-center focus:ring-2 focus:ring-pink-500/20 group dark:hover:bg-pink-500/20">
+    <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-pink-800 hover:cursor-pointer group-hover:text-pink-800 dark:text-pink-400 dark:group-hover:text-pink-200" %>
+  </a>
+</div>
+
+<div class="rounded bg-white-100 text-neutral-800 border border-neutral-200 font-medium leading-tight dark:border-none dark:bg-white/10 dark:text-white/80 pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
+  <span class="flex-1">White</span>
+  <a href="#" data-controller="prevent" data-action="click->prevent#prevent" class="size-4 rounded hover:bg-neutral-200 dark:hover:bg-white/20 flex items-center justify-center focus:ring-2 focus:ring-neutral-500/20">
+    <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-neutral-800 hover:cursor-pointer group-hover:text-neutral-700/80
+dark:text-white/80 dark:group-hover:text-white/80
+" %>
+  </a>
+</div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+  <!-- Gray -->
+  <div class="rounded bg-neutral-100 text-neutral-800 font-medium px-2 py-1 text-xs dark:bg-neutral-500/20 dark:text-neutral-200 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
+    <span class="flex-1">Gray</span>
+    <a href="#" class="size-4 rounded hover:bg-neutral-200 dark:hover:bg-neutral-500/40 flex items-center justify-center focus:ring-2 focus:ring-neutral-300/50 group">
+      <%%= icon "x-mark", class:  "size-3 flex-shrink-0 text-neutral-700 dark:text-neutral-400 hover:cursor-pointer dark:group-hover:text-neutral-300 group-hover:text-neutral-500" %>
+    </a>
+  </div>
+
+  <!-- Red -->
+  <div class="rounded bg-red-100 text-red-800 font-medium px-2 py-1 text-xs dark:bg-red-500/20 dark:text-red-200 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
+    <span class="flex-1">Red</span>
+    <a href="#" class="size-4 rounded hover:bg-red-200 dark:hover:bg-red-500/40 flex items-center justify-center focus:ring-2 focus:ring-red-300/50 group">
+      <%%= icon "x-mark", class:  "size-3 flex-shrink-0 text-red-500 dark:text-red-500/90 hover:cursor-pointer dark:group-hover:text-red-200 group-hover:text-red-500" %>
+    </a>
+  </div>
+
+  <!-- Orange -->
+  <div class="rounded bg-orange-100 text-orange-700 font-medium text-xs dark:text-orange-300 px-2 dark:bg-orange-500/20 pl-2 pr-1 py-1  inline-flex items-center justify-between space-x-1">
+    <span class="flex-1">Orange</span>
+    <a href="#" class="size-4 rounded hover:bg-orange-200 dark:hover:bg-orange-500/40 flex items-center justify-center focus:ring-2 focus:ring-orange-300/50 group">
+      <%%= icon "x-mark", class:  "size-3 flex-shrink-0 text-red-700 dark:text-orange-500 hover:cursor-pointer dark:group-hover:text-orange-200 group-hover:text-orange-500" %>
+    </a>
+  </div>
+
+  <!-- Yellow -->
+  <div class="rounded bg-yellow-100 text-yellow-700 font-medium dark:text-yellow-300 dark:bg-yellow-500/20 px-2 py-1 text-xs  pl-2 pr-1 inline-flex items-center justify-between space-x-1">
+    <span class="flex-1">Yellow</span>
+    <a href="#" class="size-4 rounded hover:bg-yellow-200 dark:hover:bg-yellow-500/40 flex items-center justify-center focus:ring-2 focus:ring-yellow-300/50 group">
+      <%%= icon "x-mark", class:  "size-3 flex-shrink-0 text-yellow-800 dark:text-yellow-500 hover:cursor-pointer
+group-hover:text-yellow-600
+dark:group-hover:text-yellow-200" %>
+    </a>
+  </div>
+
+  <!-- Green -->
+  <div class="rounded bg-green-100 text-green-800 font-medium py-1 text-xs dark:text-green-300 dark:bg-green-500/20 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
+    <span class="flex-1">Green</span>
+    <a href="#" class="size-4 rounded hover:bg-green-200/70 dark:hover:bg-green-500/40 flex items-center justify-center focus:ring-2 focus:ring-green-500/20 group">
+      <%%= icon "x-mark", class:  "size-3 flex-shrink-0 text-green-700 hover:cursor-pointer
+dark:text-green-400
+dark:group-hover:text-green-200 group-hover:text-green-800" %>
+    </a>
+  </div>
+
+  <!-- Blue -->
+  <div class="rounded bg-blue-100 text-blue-800 font-medium leading-tight text-xs dark:text-blue-300 dark:bg-blue-500/20 pl-2 pr-1 py-1 inline-flex items-center justify-between space-x-1">
+    <span class="flex-1">Blue</span>
+    <a href="#" class="size-4 rounded hover:bg-blue-200/70 dark:hover:bg-blue-500/40 flex items-center justify-center focus:ring-2 focus:ring-blue-500/20 group">
+      <%%= icon "x-mark", class:  "size-3 flex-shrink-0 text-blue-800 hover:cursor-pointer group-hover:text-blue-800 dark:text-blue-400
+dark:group-hover:text-blue-200" %>
+    </a>
+  </div>
+
+  <!-- Indigo -->
+  <div class="rounded bg-indigo-100 text-indigo-800 font-medium py-1 leading-tight dark:text-indigo-300 dark:bg-indigo-500/20 pl-2 pr-1 text-xs inline-flex items-center justify-between space-x-1">
+    <span class="flex-1">Indigo</span>
+    <a href="#" class="size-4 rounded hover:bg-indigo-200/70 dark:hover:bg-indigo-500/20 flex items-center justify-center focus:ring-2 focus:ring-indigo-500/20 group">
+      <%%= icon "x-mark", class:  "size-3 flex-shrink-0 text-indigo-800 hover:cursor-pointer group-hover:text-indigo-800
+dark:text-indigo-400
+dark:group-hover:text-indigo-200" %>
+    </a>
+  </div>
+
+  <!-- Purple -->
+  <div class="rounded bg-purple-100 text-purple-800 font-medium px-2 py-1 leading-tight text-xs dark:text-purple-300 dark:bg-purple-500/20 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
+    <span class="flex-1">Purple</span>
+    <a href="#" class="size-4 rounded hover:bg-purple-200/70 flex items-center justify-center focus:ring-2 focus:ring-purple-500/20 dark:hover:bg-purple-500/20 group">
+      <%%= icon "x-mark", class:  "size-3 flex-shrink-0 text-purple-800 hover:cursor-pointer group-hover:text-purple-800 dark:text-purple-400 dark:group-hover:text-purple-200" %>
+    </a>
+  </div>
+
+  <!-- Pink -->
+  <div class="rounded bg-pink-100 text-pink-800 font-medium px-2 py-1 leading-tight text-xs dark:text-pink-300 dark:bg-pink-500/20 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
+    <span class="flex-1">Pink</span>
+    <a href="#" class="size-4 rounded hover:bg-pink-200/70 flex items-center justify-center focus:ring-2 focus:ring-pink-500/20 group dark:hover:bg-pink-500/20">
+      <%%= icon "x-mark", class:  "size-3 flex-shrink-0 text-pink-800 hover:cursor-pointer group-hover:text-pink-800 dark:text-pink-400 dark:group-hover:text-pink-200" %>
+    </a>
+  </div>
+
+  <!-- White -->
+  <div class="rounded bg-white-100 text-neutral-800 border border-neutral-200 font-medium leading-tight dark:border-none dark:bg-white/10 dark:text-white/80 pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
+    <span class="flex-1">White</span>
+    <a href="#" class="size-4 rounded hover:bg-neutral-200 dark:hover:bg-white/20 flex items-center justify-center focus:ring-2 focus:ring-neutral-500/20">
+      <%%= icon "x-mark", class:  "size-3 flex-shrink-0 text-neutral-800 hover:cursor-pointer group-hover:text-neutral-700/80
+dark:text-white/80 dark:group-hover:text-white/80
+" %>
+    </a>
+  </div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<!-- Gray -->
+<div class="rounded bg-neutral-100 text-neutral-800 font-medium px-2 py-1 text-xs dark:bg-neutral-500/20 dark:text-neutral-200 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
+  <span class="flex-1">Gray</span>
+  <a href="#" class="size-4 rounded hover:bg-neutral-200 dark:hover:bg-neutral-500/40 flex items-center justify-center focus:ring-2 focus:ring-neutral-300/50 group">
+    <%%= icon "x-mark", class:  "size-3 flex-shrink-0 text-neutral-700 dark:text-neutral-400 hover:cursor-pointer dark:group-hover:text-neutral-300 group-hover:text-neutral-500" %>
+  </a>
+</div>
+
+<!-- Red -->
+<div class="rounded bg-red-100 text-red-800 font-medium px-2 py-1 text-xs dark:bg-red-500/20 dark:text-red-200 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
+  <span class="flex-1">Red</span>
+  <a href="#" class="size-4 rounded hover:bg-red-200 dark:hover:bg-red-500/40 flex items-center justify-center focus:ring-2 focus:ring-red-300/50 group">
+    <%%= icon "x-mark", class:  "size-3 flex-shrink-0 text-red-500 dark:text-red-500/90 hover:cursor-pointer dark:group-hover:text-red-200 group-hover:text-red-500" %>
+  </a>
+</div>
+
+<!-- Orange -->
+<div class="rounded bg-orange-100 text-orange-700 font-medium text-xs dark:text-orange-300 px-2 dark:bg-orange-500/20 pl-2 pr-1 py-1  inline-flex items-center justify-between space-x-1">
+  <span class="flex-1">Orange</span>
+  <a href="#" class="size-4 rounded hover:bg-orange-200 dark:hover:bg-orange-500/40 flex items-center justify-center focus:ring-2 focus:ring-orange-300/50 group">
+    <%%= icon "x-mark", class:  "size-3 flex-shrink-0 text-red-700 dark:text-orange-500 hover:cursor-pointer dark:group-hover:text-orange-200 group-hover:text-orange-500" %>
+  </a>
+</div>
+
+<!-- Yellow -->
+<div class="rounded bg-yellow-100 text-yellow-700 font-medium dark:text-yellow-300 dark:bg-yellow-500/20 px-2 py-1 text-xs  pl-2 pr-1 inline-flex items-center justify-between space-x-1">
+  <span class="flex-1">Yellow</span>
+  <a href="#" class="size-4 rounded hover:bg-yellow-200 dark:hover:bg-yellow-500/40 flex items-center justify-center focus:ring-2 focus:ring-yellow-300/50 group">
+    <%%= icon "x-mark", class:  "size-3 flex-shrink-0 text-yellow-800 dark:text-yellow-500 hover:cursor-pointer
+group-hover:text-yellow-600
+dark:group-hover:text-yellow-200" %>
+  </a>
+</div>
+
+<!-- Green -->
+<div class="rounded bg-green-100 text-green-800 font-medium py-1 text-xs dark:text-green-300 dark:bg-green-500/20 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
+  <span class="flex-1">Green</span>
+  <a href="#" class="size-4 rounded hover:bg-green-200/70 dark:hover:bg-green-500/40 flex items-center justify-center focus:ring-2 focus:ring-green-500/20 group">
+    <%%= icon "x-mark", class:  "size-3 flex-shrink-0 text-green-700 hover:cursor-pointer
+dark:text-green-400
+dark:group-hover:text-green-200 group-hover:text-green-800" %>
+  </a>
+</div>
+
+<!-- Blue -->
+<div class="rounded bg-blue-100 text-blue-800 font-medium leading-tight text-xs dark:text-blue-300 dark:bg-blue-500/20 pl-2 pr-1 py-1 inline-flex items-center justify-between space-x-1">
+  <span class="flex-1">Blue</span>
+  <a href="#" class="size-4 rounded hover:bg-blue-200/70 dark:hover:bg-blue-500/40 flex items-center justify-center focus:ring-2 focus:ring-blue-500/20 group">
+    <%%= icon "x-mark", class:  "size-3 flex-shrink-0 text-blue-800 hover:cursor-pointer group-hover:text-blue-800 dark:text-blue-400
+dark:group-hover:text-blue-200" %>
+  </a>
+</div>
+
+<!-- Indigo -->
+<div class="rounded bg-indigo-100 text-indigo-800 font-medium py-1 leading-tight dark:text-indigo-300 dark:bg-indigo-500/20 pl-2 pr-1 text-xs inline-flex items-center justify-between space-x-1">
+  <span class="flex-1">Indigo</span>
+  <a href="#" class="size-4 rounded hover:bg-indigo-200/70 dark:hover:bg-indigo-500/20 flex items-center justify-center focus:ring-2 focus:ring-indigo-500/20 group">
+    <%%= icon "x-mark", class:  "size-3 flex-shrink-0 text-indigo-800 hover:cursor-pointer group-hover:text-indigo-800
+dark:text-indigo-400
+dark:group-hover:text-indigo-200" %>
+  </a>
+</div>
+
+<!-- Purple -->
+<div class="rounded bg-purple-100 text-purple-800 font-medium px-2 py-1 leading-tight text-xs dark:text-purple-300 dark:bg-purple-500/20 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
+  <span class="flex-1">Purple</span>
+  <a href="#" class="size-4 rounded hover:bg-purple-200/70 flex items-center justify-center focus:ring-2 focus:ring-purple-500/20 dark:hover:bg-purple-500/20 group">
+    <%%= icon "x-mark", class:  "size-3 flex-shrink-0 text-purple-800 hover:cursor-pointer group-hover:text-purple-800 dark:text-purple-400 dark:group-hover:text-purple-200" %>
+  </a>
+</div>
+
+<!-- Pink -->
+<div class="rounded bg-pink-100 text-pink-800 font-medium px-2 py-1 leading-tight text-xs dark:text-pink-300 dark:bg-pink-500/20 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
+  <span class="flex-1">Pink</span>
+  <a href="#" class="size-4 rounded hover:bg-pink-200/70 flex items-center justify-center focus:ring-2 focus:ring-pink-500/20 group dark:hover:bg-pink-500/20">
+    <%%= icon "x-mark", class:  "size-3 flex-shrink-0 text-pink-800 hover:cursor-pointer group-hover:text-pink-800 dark:text-pink-400 dark:group-hover:text-pink-200" %>
+  </a>
+</div>
+
+<!-- White -->
+<div class="rounded bg-white-100 text-neutral-800 border border-neutral-200 font-medium leading-tight dark:border-none dark:bg-white/10 dark:text-white/80 pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
+  <span class="flex-1">White</span>
+  <a href="#" class="size-4 rounded hover:bg-neutral-200 dark:hover:bg-white/20 flex items-center justify-center focus:ring-2 focus:ring-neutral-500/20">
+    <%%= icon "x-mark", class:  "size-3 flex-shrink-0 text-neutral-800 hover:cursor-pointer group-hover:text-neutral-700/80 dark:text-white/80 dark:group-hover:text-white/80" %>
+  </a>
+</div>
+
+<% end %>
+
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/breadcrumb/_article.html.erb

@@ -0,0 +1,88 @@
+<div id="breadcrumb-article">
+  <%= render layout: example, locals: { heading: "Article" } do %>
+
+<%= render preview("neutral") do %>
+<!-- Breadcrumb -->
+<nav class="flex mb-8" aria-label="Breadcrumb">
+  <ol class="inline-flex items-center gap-2 md:gap-3">
+    <li class="inline-flex items-center">
+      <a href="#" class="inline-flex items-center gap-3 text-sm font-medium text-neutral-700 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-300 group">
+        <%= icon "home", class: "size-5 stroke-current stroke-neutral-500 dark:stroke-neutral-400 dark:group-hover:stroke-neutral-300 group-hover:stroke-neutral-600" %>
+        Home
+      </a>
+    </li>
+    <li>
+      <div class="flex items-center gap-3">
+        <%= icon "chevron-right", class: "size-4 stroke-current stroke-neutral-400 dark:stroke-neutral-500" %>
+        <a href="#" class="inline-flex items-center gap-3 text-sm font-medium text-neutral-700 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-300 group">Blog</a>
+      </div>
+    </li>
+    <li>
+      <div class="flex items-center gap-3">
+        <%= icon "chevron-right", class: "size-4 stroke-current stroke-neutral-400 dark:stroke-neutral-500" %>
+        <span
+          class="text-sm font-medium text-neutral-700 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-300 truncate flex-1 md:w-full w-40">The Future of AI Assistants: What's Coming Next</span>
+      </div>
+    </li>
+  </ol>
+</nav>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<nav class="flex mb-8" aria-label="Breadcrumb">
+  <ol class="inline-flex items-center gap-2 md:gap-3">
+    <li class="inline-flex items-center">
+      <a href="#" class="inline-flex items-center gap-3 text-sm font-medium text-neutral-700 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-300 group">
+        <%%= icon "home", class: "size-5 stroke-current stroke-neutral-500 dark:stroke-neutral-400 dark:group-hover:stroke-neutral-300 group-hover:stroke-neutral-600" %>
+        Home
+      </a>
+    </li>
+    <li>
+      <div class="flex items-center gap-3">
+        <%%= icon "chevron-right", class: "size-4 stroke-current stroke-neutral-400 dark:stroke-neutral-500" %>
+        <a href="#" class="inline-flex items-center gap-3 text-sm font-medium text-neutral-700 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-300 group">Blog</a>
+      </div>
+    </li>
+    <li>
+      <div class="flex items-center gap-3">
+        <%%= icon "chevron-right", class: "size-4 stroke-current stroke-neutral-400 dark:stroke-neutral-500" %>
+        <span
+          class="text-sm font-medium text-neutral-700 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-300 truncate flex-1 md:w-full w-40">The Future of AI Assistants: What's Coming Next</span>
+      </div>
+    </li>
+  </ol>
+</nav>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<nav class="flex mb-8" aria-label="Breadcrumb">
+  <ol class="inline-flex items-center gap-2 md:gap-3">
+    <li class="inline-flex items-center">
+      <%%= link_to "#", class: "inline-flex items-center gap-3 text-sm font-medium text-neutral-700 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-300 group" do %>
+        <%%= icon "home", class: "size-5 stroke-current stroke-neutral-500 dark:stroke-neutral-400 dark:group-hover:stroke-neutral-300 group-hover:stroke-neutral-600" %>
+        Home
+      <%% end %>
+    </li>
+    <li>
+      <div class="flex items-center gap-3">
+        <%%= icon "chevron-right", class: "size-4 stroke-current stroke-neutral-400 dark:stroke-neutral-500" %>
+        <%%= link_to "Blog", "#", class: "inline-flex items-center gap-3 text-sm font-medium text-neutral-700 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-300 group" %>
+      </div>
+    </li>
+    <li>
+      <div class="flex items-center gap-3">
+        <%%= icon "chevron-right", class: "size-4 stroke-current stroke-neutral-400 dark:stroke-neutral-500" %>
+        <span
+          class="text-sm font-medium text-neutral-700 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-300 truncate flex-1 md:w-full w-40">The Future of AI Assistants: What's Coming Next</span>
+      </div>
+    </li>
+  </ol>
+</nav>
+<% end %>
+
+
+<%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/breadcrumb/_base.html.erb

@@ -0,0 +1,77 @@
+<div id="breadcrumb-base">
+<%= render layout: example, locals: { heading: "Base" } do %>
+
+<%= render preview('neutral') do %>
+<div class="md:pl-10 font-tiktok">
+  <nav aria-label="breadcrumb" class="my-6 font-medium flex text-neutral-500 dark:text-neutral-200 text-sm">
+    <ol class="flex flex-wrap items-center space-x-3 list-none m-0 p-0">
+      <li>
+        <a href="#" class="hover:underline hover:text-neutral-600 dark:hover:text-neutral-400" data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent">Home</a>
+      </li>
+      <li class="flex space-x-3">
+        <div class="flex items-center">
+          <span class="text-neutral-300 dark:text-neutral-500">/</span>
+        </div>
+        <a href="#" class="hover:underline hover:text-neutral-600 dark:hover:text-neutral-400" data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent">Library</a>
+      </li>
+      <li class="flex space-x-3">
+        <div class="flex items-center">
+          <span class="text-neutral-300 dark:text-neutral-500">/</span>
+        </div>
+        <a href="#" aria-current="page" class="text-primary-500 dark:text-primary-500" data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent">Data</a>
+      </li>
+    </ol>
+  </nav>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<nav aria-label="breadcrumb" class="my-6 font-medium flex text-neutral-500 dark:text-neutral-200 text-sm">
+  <ol class="flex flex-wrap items-center space-x-3">
+    <li>
+      <a href="#" class="hover:underline hover:text-neutral-600 dark:hover:text-neutral-400">Home</a>
+    </li>
+    <li class="flex space-x-3">
+      <div class="flex items-center">
+        <span class="text-neutral-300 dark:text-neutral-500">/</span>
+      </div>
+      <a href="#" class="hover:underline hover:text-neutral-600 dark:hover:text-neutral-400">Library</a>
+    </li>
+    <li class="flex space-x-3">
+      <div class="flex items-center">
+        <span class="text-neutral-300 dark:text-neutral-500">/</span>
+      </div>
+      <a href="#" aria-current="page" class="text-primary-500 dark:text-primary-500">Data</a>
+    </li>
+  </ol>
+</nav>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<nav aria-label="breadcrumb" class="my-6 font-medium flex text-neutral-500 dark:text-neutral-200 text-sm">
+  <ol class="flex flex-wrap items-center space-x-3 list-none m-0 p-0">
+    <li>
+      <%%= link_to "Home", "#", class: "hover:underline hover:text-neutral-600 dark:hover:text-neutral-400" %>
+    </li>
+    <li class="flex space-x-3">
+      <div class="flex items-center">
+        <span class="text-neutral-300 dark:text-neutral-500">/</span>
+      </div>
+      <%%= link_to "Library", "#", class: "hover:underline hover:text-neutral-600 dark:hover:text-neutral-400" %>
+    </li>
+    <li class="flex space-x-3">
+      <div class="flex items-center">
+        <span class="text-neutral-300 dark:text-neutral-500">/</span>
+      </div>
+      <%%= link_to "Data", "#", class: "text-primary-500 dark:text-primary-500", data: { "aria-current": "page" } %>
+    </li>
+  </ol>
+</nav>
+<% end %>
+
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/button/_base.html.erb

@@ -0,0 +1,38 @@
+<div id="button-base">
+<%= render layout: example, locals: { heading: "Base", section: "Button" } do %>
+
+<%= render preview('neutral') do %>
+  <div class="flex items-center gap-3 flex-wrap font-tiktok">
+  <button type="button" class="btn btn-primary">Primary</button>
+  <button type="button" class="btn btn-dark">Dark</button>
+  <button type="button" class="btn btn-white">White</button>
+  <button type="button" class="btn btn-ghost">Ghost</button>
+  <button type="button" class="btn btn-danger">Danger</button>
+  <button type="button" class="btn btn-link">Link</button>
+  </div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<button type="button" class="btn btn-primary">Primary</button>
+<button type="button" class="btn btn-dark">Dark</button>
+<button type="button" class="btn btn-light">Light</button>
+<button type="button" class="btn btn-white">White</button>
+<button type="button" class="btn btn-ghost">Ghost</button>
+<button type="button" class="btn btn-danger">Danger</button>
+<button type="button" class="btn btn-link">Link</button>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<%%= button_tag "Primary", type: "button", class: "btn btn-primary" %>
+<%%= button_tag "Dark", type: "button", class: "btn btn-dark" %>
+<%%= button_tag "White", type: "button", class: "btn btn-white" %>
+<%%= button_tag "Ghost", type: "button", class: "btn btn-ghost" %>
+<%%= button_tag "Danger", type: "button", class: "btn btn-danger" %>
+<%%= button_tag "Link", type: "button", class: "btn btn-link" %>
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/button/_expanded.html.erb

@@ -0,0 +1,24 @@
+<div id="button-expanded">
+<%= render layout: example, locals: { heading: "Expanded display", section: "Button" } do %>
+
+  <div class="prose prose-neutral dark:prose-invert mb-6">
+    <p>If you need a button to span fullwidth add the appropriate Tailwind CSS width and margin classes to existing button classes.</p>
+  </div>
+
+<%= render preview('neutral') do %>
+  <button class="btn btn-primary w-full justify-center" type="button">Expanded button</button>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<button class="btn btn-primary w-full justify-center" type="button">Expanded button</button>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<%%= button_tag "Expanded button", type: "button", class: "btn btn-primary w-full justify-center" %>
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/button/_sizes.html.erb

@@ -0,0 +1,31 @@
+<div id="button-sizes">
+<%= render layout: example, locals: { heading: "Sizes", section: "Button" } do %>
+
+  <div class="prose prose-neutral dark:prose-invert mb-6"><p>Choose from two additional buttons sizes outside of the default <code>.btn</code> class (<code>.btn-lg</code>, <code>.btn-sm</code>) or customize size with additional Tailwind CSS classes.</p></div>
+
+<%= render preview('neutral') do %>
+  <div class="flex items-center gap-2 font-tiktok">
+    <button type="button" class="btn btn-primary btn-lg">Large button</button>
+    <button type="button" class="btn btn-primary">Base button</button>
+    <button type="button" class="btn btn-primary btn-sm">Small button</button>
+  </div>
+<% end %>
+
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<button type="button" class="btn btn-primary btn-lg">Large button</button>
+<button type="button" class="btn btn-primary">Base button</button>
+<button type="button" class="btn btn-primary btn-sm">Small button</button>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<%%= button_tag "Large button", type: "button", class: "btn btn-primary btn-lg" %>
+<%%= button_tag "Base Button", type: "button", class: "btn btn-primary" %>
+<%%= button_tag "Small button", type: "button", class: "btn btn-primary btn-sm" %>
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>