RubyGems - railsui - Versions diffs - 3.1.0 - Mend

railsui 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1423) hide show

data/app/views/layouts/railsui/application.html.erb ADDED Viewed

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html class="h-full antialiased scrollbar-track-transparent scrollbar-thumb-neutral-200/60 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600 selection:text-neutral-900 selection:bg-neutral-400/80">
+  <head>
+    <title>
+      <% if content_for?(:title ) %>
+        <%= yield :title %>
+      <% else %>
+        Rails UI
+      <% end %>
+    </title>
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <%= favicon_link_tag "favicon.svg" %>
+    <%= javascript_include_tag "railsui/application" %>
+    <%= javascript_include_tag "https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js", defer: true %>
+    <%= stylesheet_link_tag "application", "railsui/railsui" %>
+    <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />
+    <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=Fira+Code&display=swap" rel="stylesheet">
+    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
+    <% if Railsui.config.theme.present? %>
+      <%= render "railsui/themes/#{Railsui.config.theme}/fonts" %>
+    <% end %>
+    <%= yield :head %>
+  </head>
+  <body class="relative antialiased font-normal leading-normal railsui text-neutral-800 lg:h-screen selection:bg-neutral-300/20 selection:text-neutral-900 dark:selection:text-white dark:bg-neutral-900 dark:text-neutral-50" data-controller="railsui-toggle railsui-scroll railsui-smooth railsui-scroll-spy" data-railsui-scroll-spy-active-class-value="text-neutral-900 hover:text-neutral-950 dark:hover:text-neutral-200 dark:text-white dark:hover:text-white truncate"
+      data-railsui-scroll-spy-inactive-class-value="text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white truncate">
+    <%= render "railsui/shared/flash_messages" %>
+    <div class="flex md:flex-row flex-col items-start justify-between md:h-[calc(100vh-2px)] overflow-x-clip relative">
+      <%= image_tag "blur.png", class: "absolute -top-[500px] -right-[500px] opacity-[0.02] dark:opacity-5 z-0" %>
+      <%= render "railsui/shared/global_nav" %>
+      <div class="relative z-30 w-full h-full md:flex-1 md:pt-2 md:w-auto md:overflow-y-auto scrollbar" data-railsui-scroll-spy-target="scrollContainer">
+        <div class="flex flex-col p-4 mx-auto max-w-7xl h-full md:px-10 md:pt-10 md:pb-0">
+          <div class="flex-1">
+            <div class="grid-cols-12 gap-4 items-start md:grid">
+              <div class="pb-10 <%= content_for?(:component_nav).present? ? "col-span-9" : "col-span-12" %>">
+                <%= yield %>
+              </div>
+              <% if content_for?(:component_nav).present? %>
+                <div class="sticky top-2 col-span-3">
+                  <%= yield :component_nav %>
+                </div>
+              <% end %>
+            </div>
+          </div>
+          <%= render "railsui/shared/scroll_to_top" unless content_for?(:noscroll).present? %>
+        </div>
+      </div>
+    </div>
+    <%= yield :demo_scripts %>
+  </body>
+</html>

data/app/views/layouts/railsui/fullwidth.html.erb ADDED Viewed

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html class="h-full antialiased">
+  <head>
+    <title>
+      <% if content_for?(:title ) %>
+        <%= yield :title %>
+      <% else %>
+        Rails UI
+      <% end %>
+    </title>
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <%= favicon_link_tag "favicon.svg" %>
+    <%= javascript_include_tag "railsui/application" %>
+    <%= javascript_include_tag "https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js", defer: true %>
+    <%= stylesheet_link_tag "railsui/railsui", "application" %>
+    <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=Fira+Code&display=swap" rel="stylesheet">
+    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
+    <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />
+    <%= yield :head %>
+  </head>
+  <body class="relative antialiased font-normal leading-normal railsui text-neutral-800 lg:h-screen selection:bg-neutral-800/80 selection:text-neutral-100 dark:bg-neutral-900 dark:text-neutral-50" data-controller="railsui-toggle railsui-scroll railsui-smooth railsui-scroll-spy">
+    <div class="flex md:flex-row flex-col items-start justify-between md:h-[calc(100vh-2px)] overflow-x-clip relative">
+      <%= image_tag "blur.png", class: "absolute -top-[500px] -right-[500px] opacity-[0.09] dark:opacity-20 z-0" %>
+      <%= render "railsui/shared/global_nav" %>
+      <div class="relative z-30 w-full h-full md:flex-1 md:pt-2 md:w-auto md:overflow-y-auto scrollbar">
+        <div class="p-4 mx-auto max-w-4xl md:px-10 md:pb-10 md:pt-6">
+          <%= render "railsui/shared/flash_messages" %>
+          <%= yield %>
+          <%= render "railsui/shared/scroll_to_top" unless content_for?(:noscroll).present? %>
+        </div>
+      </div>
+    </div>
+    <%= yield :demo_scripts %>
+  </body>
+</html>

data/app/views/layouts/railsui/landing.html.erb ADDED Viewed

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="h-full antialiased">
+  <head>
+    <title>
+      <% if content_for?(:title ) %>
+        <%= yield :title %>
+      <% else %>
+        Rails UI
+      <% end %>
+    </title>
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <%= favicon_link_tag "favicon.svg" %>
+    <%= javascript_include_tag "railsui/application" %>
+    <%= javascript_include_tag "https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js", defer: true %>
+    <%= stylesheet_link_tag "railsui/application" %>
+    <%= stylesheet_link_tag "application" %>
+    <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=Fira+Code&display=swap" rel="stylesheet">
+    <%= yield :head %>
+  </head>
+  <body class="railsui font-normal leading-normal text-neutral-800 lg:h-screen relative selection:bg-neutral-50/50 antialiased dark:text-neutral-50 dark:bg-neutral-900">
+    <%= render "railsui/shared/flash_messages" %>
+    <div class="mx-auto lg:py-4 px-4 py-8 max-w-6xl">
+      <%= yield %>
+    </div>
+    <%= render "railsui/shared/scroll_to_top" unless content_for?(:noscroll).present? %>
+    <%= yield :demo_scripts %>
+  </body>
+</html>

data/app/views/layouts/railsui/routes.html.erb ADDED Viewed

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class="h-full antialiased">
+  <head>
+    <title>
+      <% if content_for?(:title ) %>
+        <%= yield :title %>
+      <% else %>
+        Rails UI
+      <% end %>
+    </title>
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <%= favicon_link_tag "favicon.svg" %>
+    <%= javascript_include_tag "railsui/application" %>
+    <%= javascript_include_tag "https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js", defer: true %>
+    <%= stylesheet_link_tag "railsui/application", "application" %>
+    <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=Fira+Code&display=swap" rel="stylesheet">
+    <%= yield :head %>
+  </head>
+  <body class="railsui font-normal leading-normal text-netural-800 lg:h-screen relative selection:bg-neutral-100 antialiased bg-white dark:bg-neutral-900 dark:text-neutral-50 overflow-x-hidden" data-controller="railsui-toggle railsui-scroll railsui-smooth">
+    <%= image_tag "blur.png", class: "absolute -top-[500px] -right-[500px] opacity-[0.05] dark:opacity-20 z-10 md:block hidden" %>
+    <%= render "railsui/shared/flash_messages" %>
+    <div class="container mx-auto px-4 md:px-6">
+      <%= yield %>
+      <div class="pt-6">
+        <%= render "railsui/shared/footer" %>
+      </div>
+    </div>
+    <%= render "railsui/shared/scroll_to_top" unless content_for?(:noscroll).present? %>
+  </body>
+</html>

data/app/views/railsui/admin/_form.html.erb ADDED Viewed

@@ -0,0 +1,32 @@
+<div class="pb-8">
+  <%= heading text: "Configuration", id: "configuration", tag: "h1", class: "lg:text-3xl text-2xl text-neutral-800 font-bold dark:text-white mb-2 tracking-tight" %>
+  <div class="prose dark:prose-invert prose-neutral max-w-full prose-lg mb-6">
+    <p>Choose a theme, customize colors or stick with the defaults and go build. 🚀</p>
+  </div>
+</div>
+<%= form_with model: @config, url: configuration_path, class: "h-full block relative pb-24", data: {
+  action: "submit->railsui-configuration#saveChanges",
+  controller: "railsui-configuration railsui-loading"
+  } do |f| %>
+  <%= f.hidden_field :theme, value: Railsui.config.theme %>
+  <%= render "railsui/admin/fields/general", f: f %>
+  <hr class="mb-6 border-neutral-200/80 dark:border-neutral-700/80">
+  <%= render "railsui/admin/fields/theme", f: f %>
+  <hr class="mb-6 border-neutral-200/80 dark:border-neutral-700/80">
+  <%= render "railsui/admin/fields/color", f: f %>
+  <hr class="mb-6 border-neutral-200/80 dark:border-neutral-700/80">
+  <%= render "railsui/admin/fields/pages", f: f %>
+  <%= render "railsui/admin/fields/commit", f: f %>
+  <%= render "railsui/admin/loader" %>
+<% end %>

data/app/views/railsui/admin/_loader.html.erb ADDED Viewed

@@ -0,0 +1,47 @@
+<div data-railsui-configuration-target="saving" data-railsui-loading-target="saving" class="config-loader">
+  <div class="flex flex-col justify-center h-full items-center relative z-50">
+    <div class="mb-6">
+      <%= image_tag "railsui-light.svg", class: "invert" %>
+    </div>
+    <h3 class="text-2xl text-white font-bold text-center mb-3">Saving changes...</h3>
+    <p class="text-white text-center mb-3">This could take a few moments</p>
+    <svg class="w-10 h-10 stroke-white" width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
+      <g fill="none" fill-rule="evenodd" stroke-width="2">
+        <circle cx="22" cy="22" r="1">
+          <animate attributeName="r"
+                begin="0s" dur="1.8s"
+                values="1; 20"
+                calcMode="spline"
+                keyTimes="0; 1"
+                keySplines="0.165, 0.84, 0.44, 1"
+                repeatCount="indefinite" />
+          <animate attributeName="stroke-opacity"
+                begin="0s" dur="1.8s"
+                values="1; 0"
+                calcMode="spline"
+                keyTimes="0; 1"
+                keySplines="0.3, 0.61, 0.355, 1"
+                repeatCount="indefinite" />
+        </circle>
+        <circle cx="22" cy="22" r="1">
+          <animate attributeName="r"
+                begin="-0.9s" dur="1.8s"
+                values="1; 20"
+                calcMode="spline"
+                keyTimes="0; 1"
+                keySplines="0.165, 0.84, 0.44, 1"
+                repeatCount="indefinite" />
+          <animate attributeName="stroke-opacity"
+                begin="-0.9s" dur="1.8s"
+                values="1; 0"
+                calcMode="spline"
+                keyTimes="0; 1"
+                keySplines="0.3, 0.61, 0.355, 1"
+                repeatCount="indefinite" />
+        </circle>
+      </g>
+    </svg>
+  </div>
+  <canvas id="canvas" data-controller="railsui-canvas" class="fixed -inset-x-24 top-96 bottom-0 w-[200%] h-full overflow-hidden transform rotate-6"></canvas>
+</div>

data/app/views/railsui/admin/fields/_color.html.erb ADDED Viewed

@@ -0,0 +1,39 @@
+<div class="py-8">
+  <div class="flex gap-2 justify-between items-center mb-6">
+    <%= heading text: "Color", id: "color", tag: "h3", class: "font-bold text-3xl tracking-tight mb-3" %>
+  </div>
+  <div class="mb-6 max-w-full prose prose-neutral dark:prose-invert">
+    <p>Rails UI includes two custom colors in addtion to Tailwind CSS 4's color palette: <code>primary</code> and <code>secondary</code>.</p>
+    <% if File.exist?("#{Rails.root}/app/assets/stylesheets/railsui/theme.css") %>
+      <h3 class="mb-0">theme.css</h3>
+      <p class="text-sm"><code class="text-neutral-400 font-normal">app/assets/stylesheets/railsui/theme.css</code></p>
+      <div class="my-3 not-prose">
+        <div data-controller="railsui-code" class="relative overflow-clip bg-gradient-to-br rounded-lg border-transparent from-neutral-700 to-neutral-800 dark:border dark:border-neutral-700 selection:bg-neutral-300/90 selection:text-neutral-800 max-h-[400px] overflow-y-auto">
+          <pre><code data-railsui-code-target="snippet" data-railsui-clipboard-target="content" class="language-css scrollbar"><%= File.read(Rails.root.join("app/assets/stylesheets/railsui/theme.css")) %></code></pre>
+        </div>
+      </div>
+      <p>The contents of the <code>app/assets/stylesheets/railsui/theme.css</code> file is displayed above for <strong><%= Railsui.config.theme.humanize %></strong>, your active theme. To customize this file, make a copy and update the <code>@import</code> path inside your main application CSS file to reference back to it. Use Tailwind's <%= link_to "theme variables guide", "https://tailwindcss.com/docs/theme", target: :_blank %> to extend this file.</p>
+      <p>I recommend <%= link_to "this tool", "https://uicolors.app/create?ref=railsui.com", target: :_blank %> for generating unique colors. Hex colors are acceptable. For a wider gamut you could reach for <%= link_to "okchl", "https://oklch.com", target: :_blank %> following in the footsteps of Tailwind CSS v4.</p>
+    <% end %>
+  </div>
+  <div class="flex items-start gap-5 py-5">
+    <div class="flex-shrink-0">
+      <div class="size-10 rounded-full flex items-center justify-center bg-neutral-50 dark:bg-neutral-800/80">
+        <%= icon "hand-thumb-up", class: "size-5 text-neutral-600 dark:text-neutral-400" %>
+      </div>
+    </div>
+    <div class="prose prose-sm max-w-full prose-neutral dark:prose-invert">
+      <h4>Best practices</h4>
+      <p>To customize this file, make a copy and update the <code>@import</code> path inside your main application CSS file to reference back to it. <strong>Changing your Rails UI theme will override this file</strong>.</p>
+    </div>
+  </div>
+</div>

data/app/views/railsui/admin/fields/_commit.html.erb ADDED Viewed

@@ -0,0 +1,12 @@
+<% content_for :noscroll, true %>
+<div data-railsui-configuration-target="submitContainer">
+  <div class="fixed bg-white/90 backdrop-blur-sm bottom-0 md:flex-row flex flex-col items-center md:justify-between w-full md:w-[calc(100vw-280px)] md:h-16 h-28 border-t border-neutral-200/80 md:left-[280px] left-0 md:px-8 px-4 dark:bg-neutral-900/90 dark:border-neutral-700/80 md:py-0 pt-2 gap-6">
+    <p class="order-2 mt-2 text-xs text-center md:text-sm md:text-left text-neutral-500 dark:text-neutral-400 md:w-auto md:order-1 md:mt-0 md:pr-4">Saving will overwrite your existing configuration and pages while preserving your color settings. Any necessary dependencies will be installed, and the app will automatically restart.</p>
+    <div class="order-1 w-full md:order-2 md:w-auto">
+      <%= f.button "Save changes", id: "config_button", class: "#{button_classes} md:w-auto w-full whitespace-nowrap", data: { railsui_configuration_target: "submit" } %>
+    </div>
+  </div>
+</div>

data/app/views/railsui/admin/fields/_general.html.erb ADDED Viewed

@@ -0,0 +1,21 @@
+<div class="pb-8">
+  <%= heading text: "General", id: "theme", tag: "h3", class: "font-semibold text-xl mb-3" %>
+  <div class="grid grid-cols-1 gap-6 mb-6 md:grid-cols-2">
+    <div>
+      <%= f.label :application_name, class: label_classes %>
+      <%= f.text_field :application_name, class: "#{input_classes} w-full", placeholder: "Rails UI" %>
+      <div class="mt-2 opacity-75 prose-sm prose-neutral dark:prose-invert">
+        <p>Only used for presentational purposes.</p>
+      </div>
+    </div>
+    <div>
+      <%= f.label :support_email, class: label_classes %>
+      <%= f.text_field :support_email, class: "#{input_classes} w-full", placeholder: "support@example.com" %>
+      <div class="mt-2 opacity-75 prose-sm prose-neutral dark:prose-invert">
+        <p>Used in mailers and pages.</p>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/railsui/admin/fields/_page.html.erb ADDED Viewed

@@ -0,0 +1,28 @@
+<div>
+  <div class="font-semibold text-sm">
+    <%  if main_app.respond_to?(details['path'].to_sym)%>
+      <%= link_to details['title'], main_app.send(details['path'].to_sym), target: :_blank, class: "hover:underline" %>
+    <% else %>
+      <span><%= details["title"] %></span>
+    <% end %>
+  </div>
+  <div class="prose-sm prose-p:text-neutral-500 dark:prose-invert dark:prose-p:text-neutral-300  leading-snug">
+    <p><%= details["description"] %></p>
+  </div>
+  <div class="mt-1">
+    <% details['tags'].each do |tag | %>
+      <%= tag_label(tag) %>
+    <% end %>
+  </div>
+</div>
+<div class="flex items-center gap-4 md:justify-between justify-end w-full md:w-auto">
+  <% if main_app.respond_to?(details['path'].to_sym) %>
+    <%= link_to main_app.send(details['path'].to_sym), class: "px-1.5 py-1.5 bg-neutral-50/20 border border-neutral-300 text-neutral-600 shadow-xs rounded text-center text-sm font-medium hover:text-neutral-700 hover:border-indigo-400 hover:bg-indigo-50/50 dark:bg-neutral-800 dark:text-neutral-100 dark:border-neutral-700 dark:hover:bg-indigo-600/10 dark:hover:text-indigo-300 dark:hover:border-indigo-600 flex items-center focus:ring-4 focus:ring-neutral-50 dark:focus:ring-4 dark:focus:ring-neutral-700 group transition ease-in-out duration-200", target: :_blank do %>
+      <span class="sr-only">View page</span>
+      <%= icon "arrow-up-right", class: "size-4 text-neutral-400 dark:text-neutral-200 group-hover:text-indigo-500 dark:group-hover:text-indigo-400" %>
+    <% end %>
+  <% end %>
+</div>

data/app/views/railsui/admin/fields/_pages.html.erb ADDED Viewed

@@ -0,0 +1,43 @@
+<div class="py-8" data-controller="railsui-pages">
+  <%= heading text: "Pages", id: "pages", tag: "h2", class: "font-bold text-3xl tracking-tight mb-6" %>
+  <div class="prose prose-neutra dark:prose-invert mb-6">
+    <p>Prototype rapidly with ready-made pages that look great with the <%= theme_name.humanize %> theme.</p>
+  </div>
+  <div class="mb-10">
+    <div class="divide-y divide-neutral-200/80 dark:divide-neutral-700/80 py-2.5">
+      <% @theme_pages.each do |page, details| %>
+        <div class="flex flex-wrap items-start justify-between py-3">
+          <%= render "railsui/admin/fields/page", page: page, details: details %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+  <div class="flex items-start gap-5 py-5">
+    <div class="flex-shrink-0">
+      <div class="size-10 rounded-full flex items-center justify-center bg-neutral-50 dark:bg-neutral-800/80">
+        <%= icon "document-plus", class: "size-5 text-neutral-600 dark:text-neutral-400" %>
+      </div>
+    </div>
+    <div class="prose prose-sm max-w-full prose-neutral dark:prose-invert">
+      <h4>Adding pages</h4>
+      <p>Installed pages are found inside the <code>app/views/rui/pages</code> folder.</p>
+    </div>
+  </div>
+  <div class="flex items-start gap-5 py-5">
+    <div class="flex-shrink-0">
+      <div class="size-10 rounded-full flex items-center justify-center bg-neutral-50 dark:bg-neutral-800/80">
+        <%= icon "hand-thumb-up", class: "size-5 text-neutral-600 dark:text-neutral-400" %>
+      </div>
+    </div>
+    <div class="prose prose-sm max-w-full prose-neutral dark:prose-invert">
+      <h4>Best practices</h4>
+      <p>Pages are a starting point. Copy them to other views you're working on and make changes there as opposed to directly inside the <code>app/views/rui/pages</code> directory. Treat this directory as read-only. <strong>Changing your Rails UI configuration will override the directory</strong>.</p>
+    </div>
+  </div>
+</div>

data/app/views/railsui/admin/fields/_theme.html.erb ADDED Viewed

@@ -0,0 +1,92 @@
+<div class="py-8 mb-10">
+  <%= heading text: "Theme", id: "theme", tag: "h2", class: "font-bold md:text-3xl text-2xl tracking-tight mb-3" %>
+  <div class="prose prose-neutral dark:prose-invert mb-6">
+    <p>Your active theme: <span class="bg-neutral-200/80 text-neutral-800 dark:bg-neutral-600/70 dark:text-neutral-200 font-medium text-sm rounded px-1 py-0.5"><%= Railsui.config.theme.humanize %></span></p>
+  </div>
+  <ul class="grid grid-cols-2 md:grid-cols-3 gap-6 mb-16">
+    <% Railsui::Default::THEMES.each do |key, theme| %>
+      <li>
+        <% theme_id = key.to_s %>
+        <input type="radio" id="configuration_theme_<%= theme_id %>" value="<%= key %>" name="configuration[theme]" class="sr-only peer group" <% if theme_id == Railsui.config.theme %>checked<% end %>>
+        <label data-railsui-configuration-target="theme" for="configuration_theme_<%= theme_id %>" class="bg-white rounded-lg overflow-clip block border border-neutral-300 focus:ring-4 focus:ring-white transition duration-300 dark:bg-neutral-700 dark:border-neutral-600 hover:shadow-xl peer-checked:ring-4 peer-checked:ring-black relative peer-checked:before:content-['Selected']
+      peer-checked:before:text-sm
+      peer-checked:before:absolute
+      peer-checked:before:top-0
+      peer-checked:before:left-0
+      peer-checked:before:bg-black/95
+      dark:peer-checked:before:bg-amber-300
+      dark:peer-checked:before:text-neutral-950
+      dark:peer-checked:ring-amber-300
+      peer-checked:before:backdrop-blur
+      peer-checked:before:w-20 peer-checked:before:px-1 peer-checked:before:py-0.5 peer-checked:before:text-white peer-checked:before:font-medium
+      peer-checked:before:rounded-br-lg
+      peer-checked:before:transition
+      peer-checked:before:animate-fade-in
+      peer-checked:before:text-center
+      peer-checked:shadow-xl
+      peer-checked:shadow-black/10">
+          <%= image_tag theme[:thumbnail], alt: "#{theme[:name]} theme" %>
+        </label>
+        <div class="mt-4 flex items-center justify-between gap-2">
+          <p class="font-semibold text-base my-2">
+            <%= theme[:name] %>
+          </p>
+          <%= link_to theme[:preview_link], target: :_blank, class: "inline-flex text-sm items-center gap-2 font-medium text-sm py-1 px-2 rounded-md border border-neutral-300 dark:border-neutral-600 hover:shadow-sm" do %>
+            <span>Preview</span>
+          <% end %>
+        </div>
+      </li>
+    <% end %>
+  </ul>
+  <p class="pt-4 tracking-wide text-neutral-500 dark:text-white">Theme FAQs</p>
+  <div class="divide-y divide-gray-200 dark:divide-neutral-700">
+    <details class="group py-4">
+      <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-semibold leading-7 text-neutral-900 dark:text-neutral-200 group-open:text-neutral-900 group-open:dark:text-neutral-400 [&::-webkit-details-marker]:hidden">
+        <div class="flex items-center gap-2">
+          What is a theme?
+        </div>
+        <svg class="mt-0.5 ml-4 h-6 w-6 flex-none stroke-neutral-300 dark:stroke-neutral-400 group-open:stroke-neutral-600" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 12H6"></path><path class="group-open:hidden" d="M12 6v12"></path></svg>
+      </summary>
+      <div class="prose prose-neutral dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-neutral-600 dark:prose-a:text-neutral-400 hover:prose-a:text-neutral-500 prose-ol:list-decimal py-6">
+        <p>A theme is a set of <%= link_to "pre-built components", systems_path %> and <%= link_to "optional pages", root_path(anchor: "pages"), data: { action: "click->railsui-smooth#scroll"} %> used to build a realistic Rails app. Themes make it easy to get a massive head start on the design and UX of your application but don't come with all the logic.</p>
+        <p>Refer to <%= link_to "railsui.com/themes", "https://railsui.com/themes", target: :_blank %> for a good reference for Rails UI themes and their intended use case. We're always working on adding more.</p>
+      </div>
+    </details>
+    <details class="group py-4">
+      <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-semibold leading-7 text-neutral-900 dark:text-neutral-200 group-open:text-neutral-900 group-open:dark:text-neutral-400 [&::-webkit-details-marker]:hidden">
+        <div class="flex items-center gap-2">
+          Can I change my theme? <span class="bg-yellow-300 text-black rounded px-1 py-px inline-flex h-4 items-center uppercase text-[9px]">New</span>
+        </div>
+        <svg class="mt-0.5 ml-4 h-6 w-6 flex-none stroke-neutral-300 dark:stroke-neutral-400 group-open:stroke-neutral-600" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 12H6"></path><path class="group-open:hidden" d="M12 6v12"></path></svg>
+      </summary>
+      <div class="prose prose-neutral dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-neutral-600 dark:prose-a:text-neutral-400 hover:prose-a:text-neutral-500 prose-ol:list-decimal py-6">
+        <p>Yes, you can change your theme at any time. We strive to make this as easy as possible but it's not without some caveats.</p>
+        <p>Here's what happens when you change your theme:</p>
+        <ul>
+          <li>
+            Rails UI generated pages (<code>app/views/rui</code>) and images (<code>app/assets/images/railsui</code>) are replaced with the newly chosen theme's files.
+            <ul>
+              <li>
+                <strong>Tip:</strong> To keep using any pages in the <code>app/views/rui</code> directory or images in the <code>app/assets/images/railsui</code> directory, copy these files to a backup location or elsewhere in your app before making changes. For best results, consider pages as code snippets for your app and treat them as read-only.
+              </li>
+            </ul>
+            <li>
+              All CSS in <code>app/assets/stylesheets/railsui</code> is replaced with the newly chosen theme's CSS files and Tailwind CSS theme configurations.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </details>
+  </div>

data/app/views/railsui/admin/fields/pages/_page_present.html.erb ADDED Viewed

@@ -0,0 +1,10 @@
+<li class="relative">
+  <div class="<%= box_label_classes(offset: false) %>">
+    <div class="rounded bg-emerald-500 text-white text-[11px] uppercase font-bold font-system tracking-wide px-1 inline-flex items-center py-0 h-4">Installed</div>
+    <p class="leading-tight block"><%= local_assigns[:label] %></p>
+    <p class="text-slate-500 text-sm block lg:mb-0 mt-1 mb-3 dark:text-slate-300"><%= local_assigns[:description] %></p>
+    <%= link_to "Preview", local_assigns [:preview_link], class: "text-slate-700 lg:ml-2 lg:ml-8 mt-2 lg:mt-0 lg:block lg:absolute right-4 top-5 px-3 lg:py-px py-2 text-[15px] bg-slate-50 rounded hover:bg-slate-100 transition ease-in-out duration-300 border-slate-300 border hover:shadow-none shadow-sm hover:text-slate-900 dark:bg-indigo-500 dark:border-indigo-500 dark:text-white hover:dark:bg-indigo-600 hover:dark:text-white", target: :_blank %>
+  </div>
+</li>

data/app/views/railsui/admin/show.html.erb ADDED Viewed

	@@ -0,0 +1 @@
1	+ <%= render "form" %>

data/app/views/railsui/default/_launchpad.html.erb ADDED Viewed

@@ -0,0 +1,89 @@
+<% content_for :head do %>
+  <%= stylesheet_link_tag "railsui/application" %>
+  <%= javascript_include_tag "railsui" %>
+  <%# Dumb hack to avoid CSS collision %>
+  <script>
+    document.addEventListener("DOMContentLoaded", () => {
+      document.body.classList.remove('rui');
+    })
+  </script>
+<% end %>
+<div class="text-center items-center h-full antialiased dark:text-white sm:py-8 py-0">
+  <div class="max-w-4xl text-center mx-auto rounded-3xl relative z-20 sm:px-16 px-0 sm:py-0 p-6 bg-white dark:bg-neutral-900">
+    <div class="flex flex-wrap justify-between items-end">
+      <div class="flex items-end justify-center flex-1">
+        <%= image_tag "rails-logo.svg", class: "fill-current md:w-36 w-24 h-auto" %>
+        <div class="bg-[var(--color-rails)]/10 inline-flex rounded-full px-3 py-px text-[var(--color-rails)] font-semibold ml-2 text-sm">
+          v<%= Rails.gem_version %>
+        </div>
+      </div>
+    </div>
+    <div class="my-10">
+      <h3 class="font-extrabold md:text-5xl text-3xl text-neutral-800 tracking-tight dark:text-white">All the tools for full-stack bliss.</h3>
+      <p class="mt-6 md:text-2xl text-lg text-neutral-600 dark:text-neutral-300">Optimized for developer happiness, Ruby on Rails compresses the complexity of modern web app development.</p>
+    </div>
+    <ul class="leading-loose text-base font-medium font-medium grid sm:grid-cols-4 gap-4 text-neutral-600 dark:text-neutral-300 max-w-3xl grid-cols-2">
+      <%= render "railsui/default/link", path: "https://guides.rubyonrails.org/", icon: "document-text", text: "Rails Guides" %>
+      <%= render "railsui/default/link", path: "https://api.rubyonrails.org/", icon: "code-bracket", text: "Rails API" %>
+      <%= render "railsui/default/link", path: "https://github.com/rails/rails", icon: "command-line", text: "Source" %>
+      <%= render "railsui/default/link", path: "https://discuss.rubyonrails.org/", icon: "chat-bubble-left-ellipsis", text: "Forum" %>
+      <%= render "railsui/default/link", path: "https://rubyonrails.org/category/releases", icon: "hashtag", text: "Releases" %>
+      <%= render "railsui/default/link", path: "https://rubyonrails.org/blog", icon: "book-open", text: "Blog" %>
+      <%= render "railsui/default/link", path: "https://jobs.rubyonrails.org/", icon: "briefcase", text: "Jobs" %>
+      <%= render "railsui/default/link", path: "https://rubyonrails.org/doctrine", icon: "light-bulb", text: "Doctrine" %>
+    </ul>
+    <hr class="border border-dashed border-neutral-300/30 dark:border-neutral-700/80 my-6">
+    <div class="relative md:p-10 p-6 rounded-xl flex md:flex-row flex-col items-center gap-10 bg-neutral-200/40 dark:bg-neutral-700/40 md:text-left mb-4 overflow-hidden">
+      <div class="md:w-1/2">
+        <%= link_to root_path, class:"text-xl tracking-tight font-black group transform text-black hover:text-black md:inline-flex flex justify-center sm:justify-start" do %>
+          <h1 class="sr-only">RailsUI</h1>
+          <%= image_tag "railsui-logo.svg", class: "w-36 h-auto dark:invert", alt: "Rails UI Logo" %>
+        <% end %>
+        <p class="sm:text-2xl text-xl mt-6 text-neutral-800 dark:text-neutral-300 mb-4 font-semibold tracking-tight">UI components &amp; themes <br />
+          for Ruby on Rails.</p>
+        <p class="text-base max-w-lg leading-relaxed text-neutral-700 dark:text-neutral-300 mb-6">Save time creating views, scaffolds, components, and making tough design decisions with the help of Rails UI.</p>
+        <%= link_to railsui.root_path, class: "py-2 pl-4 pr-3 text-center md:inline-flex flex items-center rounded-lg text-gray-800 border border-neutral-800 dark:border-neutral-600/70 shadow hover:shadow-none group bg-neutral-900 dark:bg-neutral-900 text-white rounded-full sm:h-[48px] justify-center font-semibold" do %>
+          <%= icon "cog-8-tooth", class: "stroke-current size-5 mr-2 font-medium text-white opacity-90 group-hover:opacity-100" %>
+          <span class="text-white pr-2">Configure your app</span>
+          <%= icon "chevron-right", class: "stroke-current size-4 opacity-80 group-hover:opacity-100 transform group-hover:translate-x-1 transition ease-linear duration-200 relative text-white top-px" %>
+        <% end %>
+      </div>
+      <div class="flex items-center -space-x-24 md:w-1/2 pointer-events-none">
+        <%= image_tag "tailwind-shepherd-thumbnail.jpg", class: "h-auto rounded-xl z-0 transition ease-in-out duration-200 max-w-[320px] shadow-lg relative md:-top-20", alt: "Rails UI Shepherd Theme" %>
+        <%= image_tag "tailwind-hound-thumbnail.jpg", class: " h-auto rounded-xl z-10 transition ease-in-out duration-200 max-w-[320px] md:-bottom-16 -bottom-24 -left-10 relative shadow-xl", alt: "Rails UI Hound Theme" %>
+      </div>
+    </div>
+    <ul class="leading-loose text-base font-medium font-medium grid sm:grid-cols-4 gap-4 text-neutral-600 dark:text-neutral-300 max-w-3xl grid-cols-2">
+      <%= render "railsui/default/link", path: systems_path, icon: "puzzle-piece", text: "Components" %>
+      <%= render "railsui/default/link", path: railsui.root_path(anchor: "pages"), icon: "window", text: "Pages" %>
+      <%= render "railsui/default/link", path: "/rails/mailers", icon: "envelope", text: "Mailers" %>
+      <%= render "railsui/default/link", path: railsui.routes_path, icon: "rectangle-stack", text: "Routes" %>
+    </ul>
+    <hr class="border border-dashed border-neutral-300/30 dark:border-neutral-700/80 my-6">
+    <div class="z-50 text-xs font-mono text-neutral-600 dark:text-neutral-400 text-opacity-50 pt-6">
+      Follow <%= link_to "Rails UI", "https://x.com/railsui_", target: :_blank, class: "dark:text-white text-neutral-700 underline" %> on X. <%= link_to "Grab the premium version", "https://railsui.com/pricing", target: :_blank, class: "underline" %> for more themes and components.
+    </div>