railsui 3.1.4 → 3.2.0

data/app/views/railsui/themes/corgie/authentication/devise/_unlocks.html.erb

@@ -0,0 +1,60 @@
+<%= render layout: example, locals: { heading: "Unock", section: "Authentication" } do %>
+
+  <div class=" border border-neutral-200 rounded-3xl overflow-hidden dark:border-neutral-700">
+  <div class="flex min-h-screen bg-white dark:bg-neutral-900">
+    <%= render "rui/shared/flash" %>
+    <div class="flex items-center justify-center w-full px-6 lg:w-5/12">
+      <div class="w-full max-w-sm space-y-8">
+        <div class="flex flex-col items-center justify-center gap-4">
+          <%= link_to root_path, class: "flex items-center gap-2.5 shrink-0" do %>
+            <!-- Corgie logo -->
+            <%= icon "logo.svg", custom_path: "/railsui/logo.svg", class: "size-6 fill-current", variant: :solid %>
+
+            <span class="h4 font-semibold">Corgie</span>
+          <% end %>
+
+          <% if content_for?(:title) %>
+            <p class="text-neutral-500 dark:text-neutral-400">
+              <%= yield :title %>
+            </p>
+          <% end %>
+        </div>
+
+        <%= form_with(url: "#", builder: Railsui::FormBuilder) do |f| %>
+          <%= f.form_group do %>
+            <%= f.email_field :email, label: "Email", placeholder: "Enter email", required: true %>
+          <% end %>
+
+          <%= f.submit "Resend unlock instructions", class: "w-full btn btn-lg btn-primary" %>
+        <% end %>
+      </div>
+    </div>
+    <div class="relative hidden overflow-hidden lg:flex lg:w-7/12 bg-neutral-950">
+      <%= image_tag "railsui/auth-bg.jpg", alt: "Authentication visual with pulse animation", class: "absolute inset-0 object-cover w-full h-full opacity-20 animate-auth-ambient" %>
+    </div>
+  </div>
+</div>
+
+<% content_for :example, flush: true do %>
+
+<% content_for :erb do %>
+<!-- app/views/rui/devise/unlocks/new.html.erb -->
+<%% content_for :title, "Resend unlock instructions" %>
+
+<%%= form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }, builder: Railsui::FormBuilder) do |f| %>
+  <%%= render "rui/shared/error_messages", resource: f.object %>
+
+  <%%= f.form_group do %>
+    <%%= f.email_field :email, label: "Email", placeholder: "Enter email", required: true %>
+  <%% end %>
+
+  <%%= f.submit "Resend unlock instructions", class: "btn btn-primary w-full" %>
+<%% end %>
+<% end %>
+
+
+<%= render_snippet active_tab: "erb", erb_filename: "new.html.erb" %>
+<% end %>
+<% end %>
+
+<%= system_pagination(prev_path: systems_authentication_devise_edit_path, prev_text: "Edit", next_path: systems_authentication_static_overview_path, next_text: "Static: Overview") %>

data/app/views/railsui/themes/corgie/authentication/static/_change_password.html.erb

@@ -0,0 +1,67 @@
+<%= render layout: example, locals: { heading: "Change password", section: "Authentication" } do %>
+
+<div class=" border border-neutral-200 rounded-3xl overflow-hidden dark:border-neutral-700">
+  <div class="flex min-h-screen bg-white dark:bg-neutral-900">
+    <%= render "rui/shared/flash" %>
+    <div class="flex items-center justify-center w-full px-6 lg:w-5/12">
+      <div class="w-full max-w-sm space-y-8">
+        <div class="flex flex-col items-center justify-center gap-4">
+          <%= link_to root_path, class: "flex items-center gap-2.5 shrink-0" do %>
+            <!-- Corgie logo -->
+            <%= icon "logo.svg", custom_path: "/railsui/logo.svg", class: "size-6 fill-current", variant: :solid %>
+
+            <span class="h4 font-semibold">Corgie</span>
+          <% end %>
+
+          <% if content_for?(:title) %>
+            <p class="text-neutral-500 dark:text-neutral-400">
+              <%= yield :title %>
+            </p>
+          <% end %>
+        </div>
+
+        <%= form_with(url: "#", builder: Railsui::FormBuilder) do |f| %>
+          <%= f.form_group do %>
+            <%= f.password_field :password, label: "New password", placeholder: "Enter password", required: true %>
+          <% end %>
+
+          <%= f.form_group do %>
+            <%= f.password_field :password_confirmation, label: "Confirm password", placeholder: "Confirm password", required: true %>
+          <% end %>
+
+          <%= f.submit "Change password", class: "w-full btn btn-lg btn-primary" %>
+        <% end %>
+      </div>
+    </div>
+    <div class="relative hidden overflow-hidden lg:flex lg:w-7/12 bg-neutral-950">
+      <%= image_tag "railsui/auth-bg.jpg", alt: "Authentication visual with pulse animation", class: "absolute inset-0 object-cover w-full h-full opacity-20 animate-auth-ambient" %>
+    </div>
+  </div>
+</div>
+
+<% content_for :example, flush: true do %>
+
+<% content_for :erb, flush: true do %>
+<!-- app/views/users/passwords/edit.html.erb -->
+<%% content_for :title, "Change your password" %>
+<%%= form_with(model: @user, builder: Railsui::FormBuilder) do |f| %>
+  <%%= render "rui/shared/error_messages", resource: f.object %>
+
+  <%%= f.form_group do %>
+    <%%= f.password_field :password, label: "New password", placeholder: "Enter password", required: true %>
+  <%% end %>
+
+  <%%= f.form_group do %>
+    <%%= f.password_field :password_confirmation, label: "Confirm password", placeholder: "Confirm password", required: true %>
+  <%% end %>
+
+  <%%= f.submit "Change password", class: "w-full btn btn-lg btn-primary" %>
+<%% end %>
+<% end %>
+
+
+<%= render_snippet active_tab: "erb", html_filename: "new.html", erb_filename: "new.html.erb" %>
+<% end %>
+<% end %>
+
+<%= system_pagination(prev_path: systems_authentication_static_signin_path, prev_text: "Sign in", next_path: systems_authentication_static_reset_password_path, next_text: "Reset password") %>

data/app/views/railsui/themes/corgie/authentication/static/_confirmation.html.erb

@@ -0,0 +1,58 @@
+<%= render layout: example, locals: { heading: "Confirmation", section: "Authentication" } do %>
+  <div class=" border border-neutral-200 rounded-3xl overflow-hidden dark:border-neutral-700">
+  <div class="flex min-h-screen bg-white dark:bg-neutral-900">
+    <%= render "rui/shared/flash" %>
+    <div class="flex items-center justify-center w-full px-6 lg:w-5/12">
+      <div class="w-full max-w-sm space-y-8">
+        <div class="flex flex-col items-center justify-center gap-4">
+          <%= link_to root_path, class: "flex items-center gap-2.5 shrink-0" do %>
+            <!-- Corgie logo -->
+            <%= icon "logo.svg", custom_path: "/railsui/logo.svg", class: "size-6 fill-current", variant: :solid %>
+
+            <span class="h4 font-semibold">Corgie</span>
+          <% end %>
+
+          <% if content_for?(:title) %>
+            <p class="text-neutral-500 dark:text-neutral-400">
+              <%= yield :title %>
+            </p>
+          <% end %>
+        </div>
+
+        <%= form_with(url: "#", builder: Railsui::FormBuilder) do |f| %>
+          <%= f.form_group do %>
+            <%= f.email_field :email, label: "Email", placeholder: "Enter email", required: true %>
+          <% end %>
+
+          <%= f.submit "Resend confirmation instructions", class: "w-full btn btn-lg btn-primary" %>
+        <% end %>
+      </div>
+    </div>
+    <div class="relative hidden overflow-hidden lg:flex lg:w-7/12 bg-neutral-950">
+      <%= image_tag "railsui/auth-bg.jpg", alt: "Authentication visual with pulse animation", class: "absolute inset-0 object-cover w-full h-full opacity-20 animate-auth-ambient" %>
+    </div>
+  </div>
+</div>
+
+<% content_for :example, flush: true do %>
+
+<% content_for :erb, flush: true do %>
+<!-- app/views/users/confirmations/new.html.erb -->
+<%% content_for :title, "Resend confirmation instructions" %>
+
+<%%= form_with(model: @user, builder: Railsui::FormBuilder) do |f| %>
+  <%%= render "rui/shared/error_messages", resource: f.object %>
+
+  <%%= f.form_group do %>
+    <%%= f.email_field :email, label: "Email", placeholder: "Enter email", required: true %>
+  <%% end %>
+
+  <%%= f.submit "Resend confirmation instructions", class: "w-full btn btn-lg btn-primary" %>
+<%% end %>
+<% end %>
+
+<%= render_snippet active_tab: "erb", erb_filename: "new.html.erb" %>
+<% end %>
+<% end %>
+
+<%= system_pagination(prev_path: systems_authentication_static_reset_password_path, prev_text: "Reset password", next_path: systems_authentication_static_unlocks_path, next_text: "Unlocks") %>

data/app/views/railsui/themes/corgie/authentication/static/_overview.html.erb

@@ -0,0 +1,204 @@
+<div id="auth-prerequisites">
+   <div class="prose prose-neutral dark:prose-invert mb-6">
+    <h3>Prerequisites</h3>
+
+    <p>In the version 3 of Rails UI, direct integration with <a href="https://rubygems.org/gems/devise/" target="_blank">Devise</a> was dropped in favor of a more flexible approach that is based on code snippets you copy and paste into your app.</p>
+
+    <p>These snippets should give you a head start on a lot of authentication edge cases. Using Devise? Check out the <%= link_to "Devise version", systems_authentication_devise_overview_path %>.</p>
+
+    <p>Here are the pages you'll find in the static authentication system:</p>
+
+    <ul>
+      <li><%= link_to("Sign up", systems_authentication_static_signup_path) %></li>
+      <li><%= link_to("Sign in", systems_authentication_static_signin_path) %></li>
+      <li><%= link_to("Change password", systems_authentication_static_change_password_path) %></li>
+      <li><%= link_to("Reset password", path: systems_authentication_static_reset_password_path) %></li>
+      <li><%= link_to("Confirmation", systems_authentication_static_confirmation_path) %></li>
+      <li><%= link_to("Unlock", systems_authentication_static_unlocks_path) %></li>
+    </ul>
+  </div>
+</div>
+
+<div id="auth-global-layout" class="py-6">
+
+  <div class="prose prose-neutral dark:prose-invert my-6">
+    <h3>Main Layout</h3>
+    <p>A dedicated layout for authentication pages is <code>app/views/layouts/rui/railsui_auth.html.erb</code>.</p>
+  </div>
+
+
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<!-- app/views/layouts/rui/railsui_auth.html.erb-->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>
+      <%%= Railsui.config.application_name || "Rails UI" %>
+    </title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="apple-mobile-web-app-capable" content="yes">
+
+    <%%= csrf_meta_tags %>
+    <%%= csp_meta_tag %>
+
+    <%%= yield :head %>
+
+    <%%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
+
+    <%%= railsui_head %>
+  </head>
+
+  <body class="<%%= railsui_body_classes %>">
+    <div class="flex min-h-screen bg-white dark:bg-neutral-900">
+      <%%= render "rui/shared/flash" %>
+      <div class="flex items-center justify-center w-full px-6 lg:w-5/12">
+        <div class="w-full max-w-sm space-y-8">
+          <div class="flex flex-col items-center justify-center gap-4">
+            <%%= link_to root_path, class: "flex items-center gap-2.5 shrink-0" do %>
+              <!-- Corgie logo -->
+              <%%= icon "logo.svg", custom_path: "/railsui/logo.svg", class: "size-6 fill-current", variant: :solid %>
+
+              <span class="h4"><%%= Railsui.config.application_name || "Corgie" %></span>
+            <%% end %>
+
+            <%% if content_for?(:title) %>
+              <p class="text-neutral-500 dark:text-neutral-400">
+                <%%= yield :title %>
+              </p>
+            <%% end %>
+          </div>
+          <%%= yield %>
+        </div>
+      </div>
+      <div class="relative hidden overflow-hidden lg:flex lg:w-7/12 bg-neutral-950">
+        <%%= image_tag "railsui/auth-bg.jpg", alt: "Authentication visual with pulse animation", class: "absolute inset-0 object-cover w-full h-full opacity-20 animate-auth-ambient" %>
+      </div>
+    </div>
+    <%%= railsui_launcher if Rails.env.development? %>
+  </body>
+</html>
+<% end %>
+
+<%= render_snippet(active_tab: "erb", erb_filename: "app/views/layouts/rui/railsui_auth.html.erb") %>
+
+
+<div class="prose prose-neutral dark:prose-invert my-6 max-w-full">
+  <p>Then in dedicated Devise views you can render the main meat and potatoes. Remember to include <code>content_for</code> blocks as necessary.</p>
+</div>
+
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+
+<% content_for :erb, flush: true do %>
+<%% content_for :title, "Sign up" %>
+<% end %>
+
+<%= render_snippet(active_tab: "erb") %>
+</div>
+
+<%= divider %>
+
+<div id="auth-omniauth-ui" class="py-6">
+<div class="prose prose-neutral dark:prose-invert my-6 max-w-full">
+
+<h3>OmniAuth</h3>
+<p>The <%= theme_name.humanize %> theme has support for themed and branded Omniauth provider icons. Icons for those providers are rendered from <code>app/assets/images/railsui/icons/social</code>.</p>
+
+<%= render callout do %>
+  <%= link_to "OmniAuth", "https://github.com/omniauth/omniauth", target: :_blank %> will need to be installed and configured to work with the <%= theme_name.humanize %> theme.
+<% end %>
+
+<p>Here's an example of the UI with various providers:</p>
+
+<%= render preview('neutral') do %>
+<div class="max-w-sm mx-auto">
+  <!-- Social Auth Buttons -->
+  <div class="space-y-3 mb-6">
+    <button type="button" class="w-full gap-3 btn btn-white btn-lg">
+      <%= icon "google", custom_path: "/railsui/icons/social/google.svg", class: "size-4 fill-current" %>
+      Continue with Google
+    </button>
+
+    <button type="button" class="w-full gap-3 btn btn-white btn-lg">
+      <%= icon "github", custom_path: "/railsui/icons/social/github.svg", class: "size-4 fill-current" %>
+      Continue with GitHub
+    </button>
+  </div>
+
+  <!-- Divider -->
+  <div class="relative">
+    <div class="absolute inset-0 flex items-center">
+      <div class="w-full border-t border-neutral-300 dark:border-neutral-600"></div>
+    </div>
+    <div class="relative flex justify-center text-sm">
+      <span class="px-2 bg-white text-neutral-500 dark:bg-neutral-900 dark:text-neutral-400">Or continue with email</span>
+    </div>
+  </div>
+</div>
+<% end %>
+</div>
+</div>
+
+<%= divider %>
+
+
+<div id="auth-error-messages" class="py-6">
+<%= render layout: example, locals: { heading: "_error_messages partial" } do %>
+
+<div class="prose prose-neutral dark:prose-invert my-6">
+  <p>By default Rails UI copies over a pre-styled error partial made to work out of the box and save you time during development.</p>
+
+  <p>This file is called <code>_error_messages.html.erb</code>. Unlike what ships with Devise, this partial lives in the root view directory within <code>app/views/rui/shared</code> and is used throughout the app.</p>
+
+  <p>The <%= theme_name.humanize %> theme leverages this partial for all form error rendering to keep the error/validation handling experience consistent.</p>
+</div>
+
+<%= render preview('neutral') do %>
+  <div class="bg-neutral-50 text-neutral-700 px-6 py-4 rounded-2xl mb-6 dark:bg-neutral-400/10 dark:border dark:border-neutral-400/20 dark:text-neutral-50 text-sm" role="alert">
+    <p class="font-semibold">2 errors prohibited this user from being saved:</p>
+    <ul class="list-disc mt-3 ml-4">
+      <li>Name required</li>
+      <li>Email required</li>
+    </ul>
+  </div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<%= content_for :erb, flush: true do %>
+<!-- app/views/rui/shared/_error_messages.html.erb-->
+<%% if resource.errors.any? %>
+  <div class="bg-neutral-50 text-neutral-700 px-6 py-4 rounded-2xl mb-6 dark:bg-neutral-400/10 dark:border dark:border-neutral-400/20 dark:text-neutral-50 text-sm" role="alert">
+    <p class="font-semibold"><%%= pluralize(resource.errors.count, "error") %> prohibited this <%%= resource.class.name.downcase %> from being saved:</p>
+    <ul class="list-disc mt-3 ml-4">
+      <%% resource.errors.each do |error| %>
+        <li><%%= error.full_message %></li>
+      <%% end %>
+    </ul>
+  </div>
+<%% end %>
+<% end %>
+
+<%= render_snippet active_tab: "erb", erb_filename: "_error_messages.html.erb" %>
+<% end %>
+<% end %>
+</div>
+
+<%= system_pagination(prev_path: systems_authentication_devise_unlocks_path, prev_text: "Devise: Unlocks", next_path: systems_authentication_static_signup_path, next_text: "Sign up") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Prerequisites", "#auth-prerequisites" %>
+    <%= component_link "Global auth layout", "#auth-global-layout" %>
+    <%= component_link "Links partial", "#auth-links-partial" %>
+    <%= component_link "OmniAuth UI", "#auth-omniauth-ui" %>
+    <%= component_link "Error messages", "#auth-error-messages" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/authentication/static/_reset_password.html.erb

@@ -0,0 +1,59 @@
+<%= render layout: example, locals: { heading: "Reset password", section: "Authentication" } do %>
+<div class=" border border-neutral-200 rounded-3xl overflow-hidden dark:border-neutral-700">
+  <div class="flex min-h-screen bg-white dark:bg-neutral-900">
+    <%= render "rui/shared/flash" %>
+    <div class="flex items-center justify-center w-full px-6 lg:w-5/12">
+      <div class="w-full max-w-sm space-y-8">
+        <div class="flex flex-col items-center justify-center gap-4">
+          <%= link_to root_path, class: "flex items-center gap-2.5 shrink-0" do %>
+            <!-- Corgie logo -->
+            <%= icon "logo.svg", custom_path: "/railsui/logo.svg", class: "size-6 fill-current", variant: :solid %>
+
+            <span class="h4 font-semibold">Corgie</span>
+          <% end %>
+
+          <% if content_for?(:title) %>
+            <p class="text-neutral-500 dark:text-neutral-400">
+              <%= yield :title %>
+            </p>
+          <% end %>
+        </div>
+
+        <%= form_with(url: "#", builder: Railsui::FormBuilder) do |f| %>
+          <%= f.form_group do %>
+            <%= f.password_field :password, label: "New password", placeholder: "Enter password", required: true %>
+          <% end %>
+
+          <%= f.submit "Reset Password", class: "w-full btn btn-lg btn-primary" %>
+        <% end %>
+      </div>
+    </div>
+    <div class="relative hidden overflow-hidden lg:flex lg:w-7/12 bg-neutral-950">
+      <%= image_tag "railsui/auth-bg.jpg", alt: "Authentication visual with pulse animation", class: "absolute inset-0 object-cover w-full h-full opacity-20 animate-auth-ambient" %>
+    </div>
+  </div>
+</div>
+
+<% content_for :example, flush: true do %>
+
+<% content_for :erb, flush: true do %>
+<!-- app/views/users/passwords/new.html.erb -->
+<%% content_for :title, "Reset your password" %>
+
+<%%= form_with model: @user, builder: Railsui::FormBuilder do |f| %>
+  <%%= render "rui/shared/error_messages", resource: f.object %>
+
+  <%%= f.form_group do %>
+    <%%= f.password_field :password, label: "New password", placeholder: "Enter password", required: true %>
+  <%% end %>
+
+  <%%= f.submit "Reset Password", class: "w-full btn btn-lg btn-primary" %>
+<%% end %>
+<% end %>
+
+
+<%= render_snippet active_tab: "erb", erb_filename: "new.html.erb" %>
+<% end %>
+<% end %>
+
+<%= system_pagination(prev_path: systems_authentication_static_change_password_path, prev_text: "Change password", next_path: systems_authentication_static_confirmation_path, next_text: "Confirmation") %>

data/app/views/railsui/themes/corgie/authentication/static/_signin.html.erb

@@ -0,0 +1,102 @@
+<%= render layout: example, locals: { heading: "Sign in", section: "Authentication" } do %>
+  <div class=" border border-neutral-200 rounded-3xl overflow-hidden dark:border-neutral-700">
+    <div class="flex min-h-screen bg-white dark:bg-neutral-900">
+      <%= render "rui/shared/flash" %>
+      <div class="flex items-center justify-center w-full px-6 lg:w-5/12">
+        <div class="w-full max-w-sm space-y-8">
+          <div class="flex flex-col items-center justify-center gap-4">
+            <%= link_to root_path, class: "flex items-center gap-2.5 shrink-0" do %>
+              <!-- Corgie logo -->
+              <%= icon "logo.svg", custom_path: "/railsui/logo.svg", class: "size-6 fill-current", variant: :solid %>
+
+              <span class="h4 font-semibold">Corgie</span>
+            <% end %>
+
+            <% if content_for?(:title) %>
+              <p class="text-neutral-500 dark:text-neutral-400">
+                <%= yield :title %>
+              </p>
+            <% end %>
+          </div>
+
+    <%= render "rui/shared/common/social_auth_buttons" %>  <!-- Email Form -->
+    <form>
+      <div class="form-group">
+        <label for="email" class="form-label form-label-required">
+          Email address
+        </label>
+        <input id="email" name="email" type="email" autocomplete="email" required class="form-input" placeholder="Enter your email">
+      </div>
+
+      <div class="form-group">
+        <label for="password" class="form-label form-label-required">
+          Password
+        </label>
+        <input id="password" name="password" type="password" required class="form-input" placeholder="Enter password">
+      </div>
+
+      <div class="flex items-center form-group">
+        <input id="persist_login" name="persist_login" type="checkbox" class="form-input-checkbox">
+        <label for="persist_login" class="ml-3 text-sm text-neutral-600 dark:text-neutral-400">
+          Keep me signed in
+        </label>
+      </div>
+
+      <button type="submit" class="w-full btn btn-lg btn-primary">
+        Sign in
+      </button>
+    </form>
+
+    <!-- Sign in link -->
+    <div class="text-center">
+      <p class="text-sm text-neutral-600 dark:text-neutral-400">
+        Don't have an account?
+        <%= link_to "Sign up", rui_signup_path, class: "font-medium underline text-neutral-900 dark:text-white hover:text-neutral-700 dark:hover:text-neutral-200" %>
+      </p>
+    </div>
+    </div>
+  </div>
+  <div class="relative hidden overflow-hidden lg:flex lg:w-7/12 bg-neutral-950">
+    <%= image_tag "railsui/auth-bg.jpg", alt: "Authentication visual with pulse animation", class: "absolute inset-0 object-cover w-full h-full opacity-20 animate-auth-ambient" %>
+  </div>
+  </div>
+</div>
+
+<% content_for :example, flush: true do %>
+<% content_for :erb, flush: true do %>
+<!-- app/views/users/sessions/new.html.erb -->
+<%% content_for :title, "Sign in to your account" %>
+
+<%%= form_with model: @user, builder: Railsui::FormBuilder do |f| %>
+  <%%= render "rui/shared/error_messages", resource: f.object %>
+
+  <%%= f.form_group do %>
+    <%%= f.email_field :email, label: "Email address", placeholder: "Enter your email", autocomplete: "email", required: true %>
+  <%% end %>
+
+  <%%= f.form_group do %>
+    <%%= f.password_field :password, label: "Password", placeholder: "Enter password", required: true %>
+  <%% end %>
+
+  <%%= f.form_group class: "flex items-center" do %>
+    <%%= f.check_box :persist_login, label: "Keep me signed in", label_class: "ml-3 text-sm text-neutral-600 dark:text-neutral-400" %>
+  <%% end %>
+
+  <%%= f.submit "Sign in", class: "w-full btn btn-lg btn-primary" %>
+<%% end %>
+
+<!-- Sign up link -->
+<div class="text-center">
+  <p class="text-sm text-neutral-600 dark:text-neutral-400">
+    Don't have an account?
+    <%%= link_to "Sign up", rui_signin_path, class: "font-medium underline text-neutral-900 dark:text-white hover:text-neutral-700 dark:hover:text-neutral-200" %>
+  </p>
+</div>
+<% end %>
+
+
+<%= render_snippet active_tab: "erb", html_filename: "new.html", erb_filename: "new.html.erb" %>
+<% end %>
+<% end %>
+
+<%= system_pagination(prev_path: systems_authentication_static_signup_path, prev_text: "Sign up", next_path: systems_authentication_static_change_password_path, next_text: "Change password") %>

data/app/views/railsui/themes/corgie/authentication/static/_signup.html.erb

@@ -0,0 +1,108 @@
+<%= render layout: example, locals: { heading: "Sign up", section: "Authentication" } do %>
+<div class=" border border-neutral-200 rounded-3xl overflow-hidden dark:border-neutral-700">
+  <div class="flex min-h-screen bg-white dark:bg-neutral-900">
+    <%= render "rui/shared/flash" %>
+    <div class="flex items-center justify-center w-full px-6 lg:w-5/12">
+      <div class="w-full max-w-sm space-y-8">
+        <div class="flex flex-col items-center justify-center gap-4">
+          <%= link_to root_path, class: "flex items-center gap-2.5 shrink-0" do %>
+            <!-- Corgie logo -->
+            <%= icon "logo.svg", custom_path: "/railsui/logo.svg", class: "size-6 fill-current", variant: :solid %>
+
+            <span class="h4 font-semibold">Corgie</span>
+          <% end %>
+
+          <% if content_for?(:title) %>
+            <p class="text-neutral-500 dark:text-neutral-400">
+              <%= yield :title %>
+            </p>
+          <% end %>
+        </div>
+
+        <%= render "rui/shared/common/social_auth_buttons" %>
+
+        <!-- Email Form -->
+        <form>
+          <div class="form-group">
+            <label for="email" class="form-label form-label-required">
+              Email address
+            </label>
+            <input id="email" name="email" type="email" autocomplete="email" required class="form-input" placeholder="Enter your email">
+          </div>
+
+          <div class="form-group">
+            <label for="password" class="form-label form-label-required">
+              Password
+            </label>
+            <input id="password" name="password" type="password" autocomplete="new-password" required class="form-input" placeholder="Create a password">
+            <p class="text-xs form-help">Must be at least 8 characters long</p>
+          </div>
+
+          <div class="flex items-center form-group">
+            <input id="persist_login" name="persist_login" type="checkbox" class="form-input-checkbox">
+            <label for="persist_login" class="ml-3 text-sm text-neutral-600 dark:text-neutral-400">
+              Keep me signed in
+            </label>
+          </div>
+
+          <button type="submit" class="w-full btn btn-lg btn-primary">
+            Create account
+          </button>
+        </form>
+
+        <!-- Sign in link -->
+        <div class="text-center">
+          <p class="text-sm text-neutral-600 dark:text-neutral-400">
+            Already have an account?
+            <%= link_to "Sign in", rui_signin_path, class: "font-medium underline text-neutral-900 dark:text-white hover:text-neutral-700 dark:hover:text-neutral-200" %>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="relative hidden overflow-hidden lg:flex lg:w-7/12 bg-neutral-950">
+      <%= image_tag "railsui/auth-bg.jpg", alt: "Authentication visual with pulse animation", class: "absolute inset-0 object-cover w-full h-full opacity-20 animate-auth-ambient" %>
+    </div>
+  </div>
+</div>
+
+
+<% content_for :example, flush: true do %>
+
+<% content_for :erb, flush: true do %>
+<!-- Example: app/views/users/registrations/new.html.erb -->
+<%% content_for :title, "Sign up for your account" %>
+
+<%%= form_with model: @user, builder: Railsui::FormBuilder do |f| %>
+  <%%= render "rui/shared/error_messages", resource: f.object %>
+
+  <%%= f.form_group do %>
+    <%%= f.email_field :email, label: "Email address", placeholder: "Enter your email", autocomplete: "email", required: true %>
+  <%% end %>
+
+  <%%= f.form_group do %>
+    <%%= f.password_field :password, label: "Password", placeholder: "Create a password", autocomplete: "new-password", required: true %>
+    <%%= f.form_help "Must be at least 8 characters long" %>
+  <%% end %>
+
+  <%%= f.form_group class: "flex items-center" do %>
+    <%%= f.check_box :persist_login, label: "Keep me signed in", label_class: "ml-3 text-sm text-neutral-600 dark:text-neutral-400" %>
+  <%% end %>
+
+  <%%= f.submit "Create account", class: "w-full btn btn-lg btn-primary" %>
+<%% end %>
+
+<!-- Sign in link -->
+<div class="text-center">
+  <p class="text-sm text-neutral-600 dark:text-neutral-400">
+    Already have an account?
+    <%%= link_to "Sign in", rui_signin_path, class: "font-medium underline text-neutral-900 dark:text-white hover:text-neutral-700 dark:hover:text-neutral-200" %>
+  </p>
+</div>
+<% end %>
+
+
+<%= render_snippet active_tab: "erb", html_filename: "new.html", erb_filename: "new.html.erb" %>
+<% end %>
+<% end %>
+
+<%= system_pagination(prev_path: systems_authentication_static_overview_path, prev_text: "Authentication", next_path: systems_authentication_static_signin_path, next_text: "Sign in") %>