Ruby UI 2026 - Website

AGENTS.md

@@ -0,0 +1 @@
+@CLAUDE.md

Gemfile

@@ -79,5 +79,6 @@ gem "ruby_ui", github: "ruby-ui/ruby_ui", branch: "main", require: false
 gem "pry", "0.16.0"
 
 gem "tailwind_merge", "~> 1.4.0"
+gem "rss", "0.3.1"
 
 gem "rouge", "~> 4.7"

Gemfile.lock

@@ -250,6 +250,8 @@ GEM
       io-console (~> 0.5)
     rexml (3.4.4)
     rouge (4.7.0)
+    rss (0.3.1)
+      rexml
     rubocop (1.84.2)
       json (~> 2.3)
       language_server-protocol (~> 3.17.0.2)
@@ -342,6 +344,7 @@ DEPENDENCIES
   puma (= 7.2.0)
   rails (= 8.1.3)
   rouge (~> 4.7)
+  rss (= 0.3.1)
   ruby_ui!
   selenium-webdriver
   sqlite3 (= 2.9.2)

app/assets/stylesheets/application.tailwind.css

@@ -135,6 +135,10 @@
   --color-warning-foreground: var(--warning-foreground);
   --color-success: var(--success);
   --color-success-foreground: var(--success-foreground);
+
+  /* Fonts */
+  --font-sans: "Inter", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif";
+  --font-heading: "Inter", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif";
 }
 
 /* Container settings */
@@ -149,6 +153,9 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground font-sans antialiased;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    @apply tracking-tight;
   }
 }

app/components/base.rb

@@ -8,6 +8,8 @@ class Components::Base < Phlex::HTML
   include Phlex::Rails::Helpers::ImageURL
   include Phlex::Rails::Helpers::Flash
   include Phlex::Rails::Helpers::Request
+  include Phlex::Rails::Helpers::ContentTag
+  include LucideRails::RailsHelper
 
   TAILWIND_MERGER = ::TailwindMerge::Merger.new.freeze unless defined?(TAILWIND_MERGER)
 

app/components/docs/header.rb

@@ -10,8 +10,8 @@ def initialize(title: nil, description: nil)
 
       def view_template
         div(class: "space-y-2") do
-          Components.Heading(level: 1) { @title }
-          Text(as: "p", size: "5", class: "text-muted-foreground") { @description }
+          h1(class: "scroll-m-24 text-3xl font-semibold tracking-tight sm:text-3xl") { @title }
+          p(class: "text-lg text-foreground") { @description }
         end
       end
 

app/components/docs/tailwind_config.rb

@@ -21,7 +21,7 @@ def tailwind_config
           const execSync = require('child_process').execSync;
 
           // Import ruby_ui gem path (To make sure Tailwind loads classes used by ruby_ui gem)
-          const outputRUBYUI = execSync('bundle show phlex_ui', { encoding: 'utf-8' });
+          const outputRUBYUI = execSync('bundle show ruby_ui', { encoding: 'utf-8' });
           const ruby_ui_path = outputRUBYUI.trim() + '/**/*.rb';
 
           const defaultTheme = require('tailwindcss/defaultTheme')

app/components/shared/components_list.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Components
+  module Shared
+    module ComponentsList
+      def components
+        [
+          {name: "Accordion", path: docs_accordion_path},
+          {name: "Alert", path: docs_alert_path},
+          {name: "Alert Dialog", path: docs_alert_dialog_path},
+          {name: "Aspect Ratio", path: docs_aspect_ratio_path},
+          {name: "Avatar", path: docs_avatar_path},
+          {name: "Badge", path: docs_badge_path},
+          {name: "Breadcrumb", path: docs_breadcrumb_path},
+          {name: "Button", path: docs_button_path},
+          {name: "Calendar", path: docs_calendar_path},
+          {name: "Card", path: docs_card_path},
+          {name: "Carousel", path: docs_carousel_path},
+          # { name: "Chart", path: docs_chart_path },
+          {name: "Checkbox", path: docs_checkbox_path},
+          {name: "Checkbox Group", path: docs_checkbox_group_path},
+          {name: "Clipboard", path: docs_clipboard_path},
+          {name: "Codeblock", path: docs_codeblock_path},
+          {name: "Collapsible", path: docs_collapsible_path},
+          {name: "Combobox", path: docs_combobox_path},
+          {name: "Command", path: docs_command_path},
+          {name: "Context Menu", path: docs_context_menu_path},
+          {name: "Date Picker", path: docs_date_picker_path},
+          {name: "Dialog / Modal", path: docs_dialog_path},
+          {name: "Dropdown Menu", path: docs_dropdown_menu_path},
+          {name: "Form", path: docs_form_path},
+          {name: "Hover Card", path: docs_hover_card_path},
+          {name: "Input", path: docs_input_path},
+          {name: "Link", path: docs_link_path},
+          {name: "Masked Input", path: masked_input_path},
+          {name: "Pagination", path: docs_pagination_path},
+          {name: "Popover", path: docs_popover_path},
+          {name: "Progress", path: docs_progress_path},
+          {name: "Radio Button", path: docs_radio_button_path},
+          {name: "Native Select", path: docs_native_select_path},
+          {name: "Select", path: docs_select_path},
+          {name: "Separator", path: docs_separator_path},
+          {name: "Sheet", path: docs_sheet_path},
+          {name: "Shortcut Key", path: docs_shortcut_key_path},
+          {name: "Sidebar", path: docs_sidebar_path},
+          {name: "Skeleton", path: docs_skeleton_path},
+          {name: "Switch", path: docs_switch_path},
+          {name: "Table", path: docs_table_path},
+          {name: "Tabs", path: docs_tabs_path},
+          {name: "Textarea", path: docs_textarea_path},
+          {name: "Theme Toggle", path: docs_theme_toggle_path},
+          {name: "Tooltip", path: docs_tooltip_path},
+          {name: "Typography", path: docs_typography_path}
+        ]
+      end
+    end
+  end
+end

app/components/shared/footer.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Components
+  module Shared
+    class Footer < Components::Base
+      def view_template
+        footer(class: "py-6 bg-background") do
+          div(class: "container flex flex-col items-center justify-center gap-4 md:h-12 md:flex-row") do
+            p(class: "text-balance text-center text-sm leading-loose text-foreground") do
+              plain "Heavily inspired by "
+              a(
+                href: "https://ui.shadcn.com",
+                target: "_blank",
+                rel: "noreferrer",
+                class: "font-medium underline underline-offset-4"
+              ) { "shadcn" }
+              plain ". The source code is available on "
+              a(
+                href: "https://github.com/ruby-ui/ruby_ui",
+                target: "_blank",
+                rel: "noreferrer",
+                class: "font-medium underline underline-offset-4"
+              ) { "GitHub" }
+              plain "."
+            end
+          end
+        end
+      end
+    end
+  end
+end

app/components/shared/logo.rb

@@ -9,7 +9,7 @@ def view_template
             img(src: image_url("logo.svg"), class: "h-4 block dark:hidden")
             img(src: image_url("logo_dark.svg"), class: "h-4 hidden dark:block")
             span(class: "sr-only") { "RubyUI" }
-            Badge(variant: :amber, size: :sm, class: "ml-2 whitespace-nowrap") { "1.0" }
+            Badge(class: "ml-2 whitespace-nowrap bg-black text-white hover:bg-black/90 px-1.5 py-0.5 rounded-full text-xs font-semibold") { "1.0" }
           }
         end
       end