From 879c793ec2cf6e563d9d1ba7787ddbaa11d4d4e9 Mon Sep 17 00:00:00 2001
From: Djalma <djalma@nossomos.cc>
Date: Tue, 31 Mar 2026 17:07:11 -0300
Subject: [PATCH 01/12] Modernize UI layout and components to shadcn aesthetic

---
 .devcontainer/compose.yaml                    |   4 +
 AGENTS.md                                     |   1 +
 Gemfile                                       |   1 +
 Gemfile.lock                                  |   3 +
 app/.DS_Store                                 | Bin 0 -> 8196 bytes
 .../stylesheets/application.tailwind.css      |   9 +-
 app/components/base.rb                        |   2 +
 app/components/docs/header.rb                 |   4 +-
 app/components/home_view/banner.rb            |  29 --
 app/components/home_view/card.rb              |  52 ----
 app/components/home_view/shapes.rb            |  71 -----
 app/components/home_view/steps.rb             |  36 ---
 app/components/shared/components_list.rb      |  58 ++++
 app/components/shared/logo.rb                 |   2 +-
 app/components/shared/menu.rb                 |  71 +----
 app/components/shared/navbar.rb               |  67 +++--
 app/components/shared/sidebar.rb              |   5 +-
 app/controllers/docs_controller.rb            |  12 +
 app/views/docs/changelog.rb                   |  60 +++++
 app/views/docs/components.rb                  |  29 ++
 .../docs/getting_started/introduction.rb      |   2 +-
 app/views/docs/native_select.rb               |  83 ++++++
 app/views/pages/home.rb                       | 247 ++++--------------
 config/routes.rb                              |   3 +
 24 files changed, 375 insertions(+), 476 deletions(-)
 create mode 100644 AGENTS.md
 create mode 100644 app/.DS_Store
 delete mode 100644 app/components/home_view/banner.rb
 delete mode 100644 app/components/home_view/card.rb
 delete mode 100644 app/components/home_view/shapes.rb
 delete mode 100644 app/components/home_view/steps.rb
 create mode 100644 app/components/shared/components_list.rb
 create mode 100644 app/views/docs/changelog.rb
 create mode 100644 app/views/docs/components.rb
 create mode 100644 app/views/docs/native_select.rb

diff --git a/.devcontainer/compose.yaml b/.devcontainer/compose.yaml
index b891aefe2..651ee1193 100644
--- a/.devcontainer/compose.yaml
+++ b/.devcontainer/compose.yaml
@@ -8,6 +8,10 @@ services:
 
     volumes:
     - ../../web:/workspaces/web:cached
+    - ../../ruby_ui:/workspaces/ruby_ui:cached
+    
+    ports:
+    - "3001:3000"
 
     # Overrides default command so things don't shut down after the process ends.
     command: sleep infinity
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 000000000..a6fce0a1c
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1 @@
+@CLAUDE.md
\ No newline at end of file
diff --git a/Gemfile b/Gemfile
index a99f1fd6e..a5b4d2c37 100644
--- a/Gemfile
+++ b/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"
diff --git a/Gemfile.lock b/Gemfile.lock
index f602cd579..7b32c8a98 100644
--- a/Gemfile.lock
+++ b/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)
diff --git a/app/.DS_Store b/app/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..6a63f00734669255d1f7ba2904e9afb52020a921
GIT binary patch
literal 8196
zcmeHMzi-qq6n^fd?a>N>7*Ll=`2#ATVqgvB*b(;!Q0|B5p`<x+g-%Fe1_{K>$bSJy
zEQkfERi(~MNK6b!Oe}oQb{#v8xeZa(j^cO9`<~yIFHYR&5|P+?JlZ5$Bcd)&wij2?
zwKVqg>9qxYWdl|qo@kF|`Gd{=uq>t?I$nqhL<OP(QGuvHRN#M50Bbh4ZeZP4-q=S4
zq5@}90scOuIN4^}R?5mx2Rc~-z$UmX8-Ak>kTI#YnYNX(G8AK~>OtsGp-T**!r@OD
z4x4FPDXYRssBjWGv(Ocakl7KJN;rv3+1N(~q5{4GT)QvPeVXAId-eOl8{Qaj{6*R8
z4f1k;>)l^pUtGPLf4=EsMsqRK9c!Q9P`<TY8qyB9?BW<x?(HSK<(y57&FB4h!>0vT
zbNU<3;iW!8E67<=K~wb1Y}eDNbMH5}wc>1k$LlXo^a@~Wj`Oe%&kJ{uo>nDKX7>n8
za~xy*YV62d+7BabuIDxk*TA?%S+kvwcKFgZ^IgW%=I1<Z<GJ|7N7(${T`~L`<Ji2y
zD3_0%e=GD5v+s#~8-`GB0%m*ee%80kVAYDVx!t&KxCOAaa`Uhb&xLEOTLPXX4Vq6@
zoVR^8pN~%s9}{b<)aG~csztejXEmXLt4NX}tM=GAKRq)!jkmsQ-|Ob%K`}oHJc~*D
zJWhW42s{7!bCbU@j(z80l*=b$K1<+J(n!wP##;qX!*6r>@!D{4#;}=$FfNajc`Ra%
zPQYTnF$0pL53bkdaI637<lAG#+YH(fPX1*%|CmE;r(c1Nx`j2a|8Ix)|4;vo#yf}#
zL<NEhh@{u=ZNaT;YY)h^c8YTwCpX4b%E}OQvK)t%<v6VQharBafO1TxZKW)(p#AfW
VfSJAK#r41bn=G#XazdVw?hmktyUzds

literal 0
HcmV?d00001

diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index ed1f1b64d..67fc2752a 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/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;
   }
 }
diff --git a/app/components/base.rb b/app/components/base.rb
index 88d3b61e8..c8d208916 100644
--- a/app/components/base.rb
+++ b/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)
 
diff --git a/app/components/docs/header.rb b/app/components/docs/header.rb
index fb3940831..45433952b 100644
--- a/app/components/docs/header.rb
+++ b/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
 
diff --git a/app/components/home_view/banner.rb b/app/components/home_view/banner.rb
deleted file mode 100644
index 0ce60f551..000000000
--- a/app/components/home_view/banner.rb
+++ /dev/null
@@ -1,29 +0,0 @@
-# frozen_string_literal: true
-
-module Components
-  module HomeView
-    class Banner < Components::Base
-      include DeferredRender
-
-      def view_template(&block)
-        div(class: "relative overflow-hidden") do
-          render Shared::GridPattern.new(spacing: :md)
-          render HomeView::Shapes.new(size: :xl, color: :pink, class: "hidden sm:block absolute right-0 top-1/2 transform -translate-y-1/2 sm:translate-x-2/3 md:translate-x-1/2")
-          div(class: "relative container mx-auto max-w-3xl py-24 px-4 sm:text-center flex flex-col sm:items-center gap-y-6") do
-            Heading(level: 1) do
-              plain "A UI component library, crafted precisely for Ruby devs"
-              span(class: "text-primary/70") { " who want to stay organised and build modern apps, fast." }
-            end
-            if @cta
-              div(class: "grid grid-cols-1 sm:grid-cols-2 gap-4", &@cta)
-            end
-          end
-        end
-      end
-
-      def cta(&block)
-        @cta = block
-      end
-    end
-  end
-end
diff --git a/app/components/home_view/card.rb b/app/components/home_view/card.rb
deleted file mode 100644
index f6ddbaba8..000000000
--- a/app/components/home_view/card.rb
+++ /dev/null
@@ -1,52 +0,0 @@
-# frozen_string_literal: true
-
-module Components
-  module HomeView
-    class Card < Components::Base
-      include DeferredRender
-
-      def initialize(attributes = {})
-        @attributes = attributes
-        @title = attributes.delete(:title)
-        @subtitle = attributes.delete(:subtitle) || nil
-        @color = attributes.delete(:color) || :card
-
-        @color_classes = {
-          card: "bg-background border",
-          primary: "bg-primary text-white",
-          secondary: "bg-accent text-accent-foreground",
-          # Add sky, violet, amber, lime, pink
-          sky: "bg-sky-100 text-sky-950",
-          violet: "bg-violet-100 text-violet-950",
-          amber: "bg-amber-100 text-amber-950",
-          lime: "bg-lime-100 text-lime-950",
-          pink: "bg-pink-100 text-pink-950"
-        }
-      end
-
-      def view_template(&block)
-        div(**@attributes, class: ["relative flex flex-col p-6 md:p-10 rounded-2xl space-y-8 overflow-hidden", @attributes[:class], @color_classes[@color.to_sym]]) do
-          if @icon
-            div(&@icon)
-          end
-          if @title || @subtitle
-            div(class: "space-y-2") do
-              h2(class: "font-semibold leading-none tracking-tight") { @title } if @title
-              p { @subtitle } if @subtitle
-            end
-          end
-
-          @content&.call
-        end
-      end
-
-      def icon(&block)
-        @icon = block
-      end
-
-      def content(&block)
-        @content = block
-      end
-    end
-  end
-end
diff --git a/app/components/home_view/shapes.rb b/app/components/home_view/shapes.rb
deleted file mode 100644
index 757fb1bd9..000000000
--- a/app/components/home_view/shapes.rb
+++ /dev/null
@@ -1,71 +0,0 @@
-# frozen_string_literal: true
-
-module Components
-  module HomeView
-    class Shapes < Components::Base
-      def initialize(size: :md, **attributes)
-        @attributes = attributes
-        @circle_sizes = {
-          xs: "w-8 h-8",
-          sm: "w-12 h-12",
-          md: "w-16 h-16",
-          lg: "w-24 h-24",
-          xl: "w-32 h-32"
-        }
-
-        @square_sizes = {
-          xs: "w-16 h-16 rounde-md",
-          sm: "w-24 h-24 rounded-md",
-          md: "w-32 h-32 rounded-lg",
-          lg: "w-48 h-48 rounded-lg",
-          xl: "w-64 h-64 rounded-xl"
-        }
-
-        @size = size
-        @colors = %w[sky violet pink amber lime]
-        @color = @attributes.delete(:color) || @colors.sample
-      end
-
-      def view_template
-        # Create one square and one circle of different colors
-        # The square will be on a rotation of 15deg
-        # the circle will be a solid color
-        # The shapes will be slightly overlapping
-        div(**@attributes) do
-          div(class: "relative") do
-            circle
-            square
-          end
-        end
-      end
-
-      def square
-        color_classes = {
-          sky: "bg-sky-500/10 backdrop-blur-3xl ring-1 ring-sky-600/20 saturate-150",
-          violet: "bg-violet-500/10 backdrop-blur-3xl ring-1 ring-violet-600/20 saturate-150",
-          pink: "bg-pink-500/10 backdrop-blur-3xl ring-1 ring-pink-600/20 saturate-150",
-          amber: "bg-amber-500/10 backdrop-blur-3xl ring-1 ring-amber-600/20 saturate-150",
-          lime: "bg-lime-500/10 backdrop-blur-3xl ring-1 ring-lime-600/20 saturate-150"
-        }
-
-        sample_color = color_classes[@color.to_sym]
-
-        div(class: "#{@square_sizes[@size]} #{sample_color} -rotate-12")
-      end
-
-      def circle
-        color_classes = {
-          sky: "bg-sky-400",
-          violet: "bg-violet-400",
-          pink: "bg-pink-400",
-          amber: "bg-amber-400",
-          lime: "bg-lime-400"
-        }
-
-        sample_color = color_classes[@color.to_sym]
-
-        div(class: "#{@circle_sizes[@size]} #{sample_color} rounded-full absolute top-0 left-0 transform -translate-x-1/2 -translate-y-1/2")
-      end
-    end
-  end
-end
diff --git a/app/components/home_view/steps.rb b/app/components/home_view/steps.rb
deleted file mode 100644
index 28383c6bb..000000000
--- a/app/components/home_view/steps.rb
+++ /dev/null
@@ -1,36 +0,0 @@
-# frozen_string_literal: true
-
-module Components
-  module HomeView
-    class Steps < Components::Base
-      def initialize(attributes = {})
-        @attributes = attributes
-        @steps = attributes.delete(:steps) || []
-      end
-
-      def view_template(&block)
-        div(**@attributes) do
-          @steps.each_with_index do |step, index|
-            render_step(step, index: index, last: index == @steps.length - 1)
-          end
-        end
-      end
-
-      def render_step(step, index:, last: false)
-        div(class: "relative flex space-x-8") do
-          div(class: "flex-shrink-0 h-full") do
-            div(class: "flex-0 flex items-center justify-center h-6 w-6 rounded-full border bg-background") do
-              p(class: "font-medium") { index + 1 }
-            end
-            # vertical line unless last
-            hr(class: "absolute left-3 top-6 -ml-px h-full w-px bg-border") unless last
-          end
-          div(class: "flex-grow space-y-2 pb-10 pt-1") do
-            h3(class: "font-semibold leading-none tracking-tight") { step[:title] } if step[:title]
-            p { step[:description] } if step[:description]
-          end
-        end
-      end
-    end
-  end
-end
diff --git a/app/components/shared/components_list.rb b/app/components/shared/components_list.rb
new file mode 100644
index 000000000..49c824905
--- /dev/null
+++ b/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
diff --git a/app/components/shared/logo.rb b/app/components/shared/logo.rb
index a12f7ff24..4d06f7b04 100644
--- a/app/components/shared/logo.rb
+++ b/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
diff --git a/app/components/shared/menu.rb b/app/components/shared/menu.rb
index 3cb1150b1..9d2369d8c 100644
--- a/app/components/shared/menu.rb
+++ b/app/components/shared/menu.rb
@@ -3,16 +3,18 @@
 module Components
   module Shared
     class Menu < Components::Base
+      include ComponentsList
+
       def view_template
         div(class: "pb-4") do
           # Main routes (Docs, Components, Themes, Github, Discord, Twitter)
           div(class: "md:hidden") do
             main_link("Docs", docs_introduction_path)
-            main_link("Components", docs_accordion_path)
+            main_link("Components", docs_components_path)
             main_link("Themes", theme_path("default"))
             main_link("Github", "https://github.com/PhlexUI/phlex_ui")
             main_link("Discord", ENV["DISCORD_INVITE_LINK"])
-            main_link("Twitter", ENV["PHLEXUI_TWITTER_LINK"])
+            main_link("Discord", ENV["DISCORD_INVITE_LINK"])
           end
 
           # GETTING STARTED
@@ -34,7 +36,6 @@ def view_template
           # COMPONENTS
           h4(class: "mb-1 mt-4 rounded-md px-2 py-1 text-sm font-semibold flex items-center gap-x-2") do
             plain "Components"
-            Badge(variant: :primary, size: :sm) { components.count.to_s }
           end
           div(class: "grid grid-flow-row auto-rows-max text-sm") do
             components.each do |component|
@@ -50,7 +51,8 @@ def getting_started_links
           {name: "Installation", path: docs_installation_path},
           {name: "Dark mode", path: docs_dark_mode_path},
           {name: "Theming", path: docs_theming_path},
-          {name: "Customizing components", path: docs_customizing_components_path}
+          {name: "Customizing components", path: docs_customizing_components_path},
+          {name: "Changelog", path: docs_changelog_path}
         ]
       end
 
@@ -61,69 +63,16 @@ def installation_links
         ]
       end
 
-      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, badge: "New"},
-          {name: "Button", path: docs_button_path},
-          {name: "Calendar", path: docs_calendar_path},
-          {name: "Card", path: docs_card_path},
-          {name: "Carousel", path: docs_carousel_path, badge: "New"},
-          # { name: "Chart", path: docs_chart_path, badge: "New" },
-          {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, badge: "Updated"},
-          {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, badge: "New"},
-          {name: "Popover", path: docs_popover_path},
-          {name: "Progress", path: docs_progress_path, badge: "New"},
-          {name: "Radio Button", path: docs_radio_button_path, badge: "New"},
-          {name: "Select", path: docs_select_path, badge: "New"},
-          {name: "Separator", path: docs_separator_path, badge: "New"},
-          {name: "Sheet", path: docs_sheet_path},
-          {name: "Shortcut Key", path: docs_shortcut_key_path},
-          {name: "Sidebar", path: docs_sidebar_path, badge: "New"},
-          {name: "Skeleton", path: docs_skeleton_path, badge: "New"},
-          {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
-
       def menu_link(component)
         current_path = component[:path] == request.path
         a(
           href: component[:path],
           class: [
-            "group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline",
-            (current_path ? "text-foreground font-medium" : "text-muted-foreground")
+            "group flex w-full items-center rounded-md border border-transparent px-2 py-0.5 transition-colors",
+            (current_path ? "text-foreground font-semibold" : "text-foreground hover:bg-zinc-100 dark:hover:bg-zinc-800")
           ]
         ) do
-          span(class: "flex items-center gap-x-1") do
-            span { component[:name] }
-            Badge(variant: :success, size: :sm, class: "ml-1") { component[:badge] } if component[:badge]
-          end
+          component[:name]
         end
       end
 
@@ -133,7 +82,7 @@ def main_link(name, path)
           href: path,
           class: [
             "group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline",
-            (current_path ? "text-foreground font-medium" : "text-muted-foreground")
+            (current_path ? "text-foreground font-medium" : "text-foreground/80")
           ]
         ) do
           name
diff --git a/app/components/shared/navbar.rb b/app/components/shared/navbar.rb
index aa8f34dab..1bd7b11da 100644
--- a/app/components/shared/navbar.rb
+++ b/app/components/shared/navbar.rb
@@ -3,22 +3,29 @@
 module Components
   module Shared
     class Navbar < Components::Base
+      include ComponentsList
+
       def view_template
         header(class: "supports-backdrop-blur:bg-background/80 sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur-2xl backdrop-saturate-200") do
           div(class: "px-2 sm:px-4 sm:container flex h-14 items-center justify-between") do
             div(class: "mr-4 flex items-center") do
               render Shared::MobileMenu.new(class: "md:hidden")
               render Shared::Logo.new
-
-              Link(href: docs_introduction_path, variant: :ghost, class: "hidden md:inline-block") { "Docs" }
-              Link(href: docs_accordion_path, variant: :ghost, class: "hidden md:inline-block") { "Components" }
-              Link(href: theme_path("default"), variant: :ghost, class: "hidden md:inline-block") { "Themes" }
+              nav(class: "hidden md:flex items-center gap-6 text-sm font-medium") do
+                a(href: docs_introduction_path, class: "transition-colors hover:text-foreground/80 text-foreground") { "Docs" }
+                a(href: docs_components_path, class: "transition-colors hover:text-foreground/80 text-foreground") { "Components" }
+                a(href: theme_path("default"), class: "transition-colors hover:text-foreground/80 text-foreground") { "Themes" }
+              end
             end
             div(class: "flex items-center gap-x-2 md:divide-x") do
-              div(class: "flex items-center") do
-                twitter_link
-                github_link
-                dark_mode_toggle
+              div(class: "flex items-center w-full justify-between md:justify-end gap-2") do
+                div(class: "w-full flex-1 md:w-auto md:flex-none") do
+                  search_button
+                end
+                div(class: "flex items-center") do
+                  github_link
+                  dark_mode_toggle
+                end
               end
             end
           end
@@ -62,18 +69,38 @@ def dark_mode_toggle
         end
       end
 
-      def twitter_link
-        Link(href: "https://twitter.com/phlexui", variant: :ghost, icon: true) do
-          svg(
-            viewbox: "0 0 20 20",
-            aria_hidden: "true",
-            fill: "currentColor",
-            class: "h-4 w-4"
-          ) do |s|
-            s.path(
-              d:
-                "M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0 0 20 3.92a8.19 8.19 0 0 1-2.357.646 4.118 4.118 0 0 0 1.804-2.27 8.224 8.224 0 0 1-2.605.996 4.107 4.107 0 0 0-6.993 3.743 11.65 11.65 0 0 1-8.457-4.287 4.106 4.106 0 0 0 1.27 5.477A4.073 4.073 0 0 1 .8 7.713v.052a4.105 4.105 0 0 0 3.292 4.022 4.095 4.095 0 0 1-1.853.07 4.108 4.108 0 0 0 3.834 2.85A8.233 8.233 0 0 1 0 16.407a11.615 11.615 0 0 0 6.29 1.84"
-            )
+      def search_button
+        CommandDialog do
+          CommandDialogTrigger(keybindings: ['keydown.ctrl+k@window', 'keydown.meta+k@window']) do
+            Button(variant: :outline, class: "relative h-8 w-full justify-start rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64") do
+              svg(xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_linejoin: "round", class: "mr-2") { |s| s.circle(cx: "11", cy: "11", r: "8"); s.path(d: "m21 21-4.3-4.3") }
+              span(class: "hidden lg:inline-flex") { "Search documentation..." }
+              span(class: "inline-flex lg:hidden") { "Search..." }
+              kbd(class: "pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex") do
+                span(class: "text-xs") { "⌘" }
+                plain "K"
+              end
+            end
+          end
+          CommandDialogContent(class: "overflow-hidden p-0 shadow-2xl top-[10%] translate-y-0") do
+            Command(class: "flex h-full w-full flex-col overflow-hidden") do
+              CommandInput(placeholder: "Search documentation...", class: "border-none focus:ring-0")
+              CommandEmpty { "No results found." }
+              CommandList(class: "max-h-[min(450px,80vh)] overflow-y-auto p-2") do
+                CommandGroup(title: "Components") do
+                  components.each do |component|
+                    CommandItem(value: component[:name], href: component[:path], class: "px-2 py-1.5") do
+                      plain component[:name]
+                    end
+                  end
+                end
+                CommandGroup(title: "Links") do
+                  CommandItem(value: "Introduction", href: docs_introduction_path, class: "px-2 py-1.5") { "Introduction" }
+                  CommandItem(value: "Installation", href: docs_installation_path, class: "px-2 py-1.5") { "Installation" }
+                  CommandItem(value: "Theming", href: docs_theming_path, class: "px-2 py-1.5") { "Theming" }
+                end
+              end
+            end
           end
         end
       end
diff --git a/app/components/shared/sidebar.rb b/app/components/shared/sidebar.rb
index 9b072252c..49a5bebfc 100644
--- a/app/components/shared/sidebar.rb
+++ b/app/components/shared/sidebar.rb
@@ -5,8 +5,9 @@ module Shared
     class Sidebar < Components::Base
       def view_template
         aside(class: "fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block") do
-          div(class: "relative overflow-hidden h-full py-6 pl-8 pr-6 lg:py-8", style: "position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px") do
-            div(class: "h-full w-full rounded-[inherit]", style: "overflow: hidden scroll;", data_controller: "sidebar-menu") do
+          div(class: "relative overflow-hidden h-full py-6 pl-8 pr-6 lg:py-8") do
+            # Updated Scroll wrapper using CSS to hide scrollbar
+            div(class: "h-full w-full rounded-[inherit] overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] pb-10", data_controller: "sidebar-menu") do
               render Shared::Menu.new
             end
           end
diff --git a/app/controllers/docs_controller.rb b/app/controllers/docs_controller.rb
index 92382c692..071964b0b 100644
--- a/app/controllers/docs_controller.rb
+++ b/app/controllers/docs_controller.rb
@@ -34,6 +34,14 @@ def installation_rails_importmaps
   end
 
   # COMPONENTS
+  def components
+    render Views::Docs::Components.new
+  end
+
+  def changelog
+    render Views::Docs::Changelog.new
+  end
+
   def accordion
     render Views::Docs::Accordion.new
   end
@@ -162,6 +170,10 @@ def radio_button
     render Views::Docs::RadioButton.new
   end
 
+  def native_select
+    render Views::Docs::NativeSelect.new
+  end
+
   def select
     render Views::Docs::Select.new
   end
diff --git a/app/views/docs/changelog.rb b/app/views/docs/changelog.rb
new file mode 100644
index 000000000..2c4618669
--- /dev/null
+++ b/app/views/docs/changelog.rb
@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+require "rss"
+require "open-uri"
+
+class Views::Docs::Changelog < Views::Base
+  def view_template
+    div(class: "mx-auto max-w-[800px] py-10") do
+      h1(class: "scroll-m-24 text-3xl font-semibold tracking-tight sm:text-3xl mb-4") { "Changelog" }
+      p(class: "text-xl text-foreground mb-8") { "Latest updates and announcements from the RubyUI team." }
+
+      if releases.any?
+        div(class: "space-y-12") do
+          releases.each do |release|
+            div(class: "flex flex-col items-start gap-4 md:flex-row md:items-baseline md:gap-8") do
+              div(class: "w-full md:w-32 shrink-0") do
+                p(class: "text-sm text-foreground/70") { format_date(release[:published_at]) }
+              end
+              div(class: "grid gap-4 w-full") do
+                h2(class: "text-2xl font-bold tracking-tight inline-flex items-center gap-2") do
+                  plain release[:name]
+                end
+                div(class: "prose prose-slate dark:prose-invert max-w-none [&>ul]:my-6 [&>ul]:ml-6 [&>ul]:list-disc [&>ul>li]:mt-2 [&>h3]:text-xl [&>h3]:font-bold [&>h2]:text-2xl [&>h2]:font-bold") do
+                  raw(release[:body].to_s.html_safe)
+                end
+              end
+            end
+            Separator(class: "my-8")
+          end
+        end
+      else
+        p(class: "text-muted-foreground") { "No releases found." }
+      end
+    end
+  end
+
+  private
+
+  def releases
+    @releases ||= begin
+      url = "https://github.com/ruby-ui/ruby_ui/releases.atom"
+      feed = RSS::Parser.parse(URI.open(url).read, false)
+      feed.items.map do |item|
+        {
+          name: item.title.content,
+          published_at: item.updated.content.to_s,
+          body: item.content.content
+        }
+      end
+    rescue
+      []
+    end
+  end
+
+  def format_date(date_string)
+    datetime = DateTime.parse(date_string)
+    datetime.strftime("%B %d, %Y")
+  rescue
+    date_string
+  end
+end
diff --git a/app/views/docs/components.rb b/app/views/docs/components.rb
new file mode 100644
index 000000000..9adea7bad
--- /dev/null
+++ b/app/views/docs/components.rb
@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class Views::Docs::Components < Views::Base
+  include Components::Shared::ComponentsList
+
+  def view_template
+    div(class: "mx-auto max-w-[800px] py-10") do
+      h1(class: "scroll-m-24 text-3xl font-semibold tracking-tight sm:text-3xl mb-4") { "Components" }
+      p(class: "text-lg text-foreground mb-8 text-balance") { "A UI component library, crafted precisely for Ruby devs who want to stay organised and build modern apps, fast." }
+
+      div(class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-4 mb-24 mt-12") do
+        components.each do |component|
+          a(href: component[:path], class: "text-base text-foreground/80 hover:text-foreground hover:underline transition-colors") do
+            component[:name]
+          end
+        end
+      end
+
+      div(class: "rounded-xl border border-muted bg-muted/20 p-6") do
+        h3(class: "font-semibold text-lg tracking-tight mb-2") { "Missing a component?" }
+        p(class: "text-foreground mb-4") do
+          plain "Can't find the component you're looking for? Let us know what you'd like to see next by opening a suggestion on our "
+          a(href: "https://github.com/ruby-ui/ruby_ui/issues/new", target: "_blank", class: "font-medium underline underline-offset-4") { "GitHub Issues" }
+          plain " page."
+        end
+      end
+    end
+  end
+end
diff --git a/app/views/docs/getting_started/introduction.rb b/app/views/docs/getting_started/introduction.rb
index 1d4b1a2c3..b56f3f3ba 100644
--- a/app/views/docs/getting_started/introduction.rb
+++ b/app/views/docs/getting_started/introduction.rb
@@ -2,7 +2,7 @@
 
 class Views::Docs::GettingStarted::Introduction < Views::Base
   def view_template
-    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+    div(class: "max-w-2xl mx-auto w-full py-4 space-y-10") do
       render Docs::Header.new(title: "Introduction", description: "Reusable UI components for Ruby developers")
 
       div(class: "space-y-4") do
diff --git a/app/views/docs/native_select.rb b/app/views/docs/native_select.rb
new file mode 100644
index 000000000..98a6a76e8
--- /dev/null
+++ b/app/views/docs/native_select.rb
@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+class Views::Docs::NativeSelect < Views::Base
+  def view_template
+    component = "NativeSelect"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Native Select", description: "A styled native HTML select element with consistent design system integration.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Default", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            NativeSelect do
+              NativeSelectOption(value: "") { "Select a fruit" }
+              NativeSelectOption(value: "apple") { "Apple" }
+              NativeSelectOption(value: "banana") { "Banana" }
+              NativeSelectOption(value: "blueberry") { "Blueberry" }
+              NativeSelectOption(value: "pineapple") { "Pineapple" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Groups", description: "Use NativeSelectGroup to organize options into categories.", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            NativeSelect do
+              NativeSelectOption(value: "") { "Select a department" }
+              NativeSelectGroup(label: "Engineering") do
+                NativeSelectOption(value: "frontend") { "Frontend" }
+                NativeSelectOption(value: "backend") { "Backend" }
+                NativeSelectOption(value: "devops") { "DevOps" }
+              end
+              NativeSelectGroup(label: "Sales") do
+                NativeSelectOption(value: "account_executive") { "Account Executive" }
+                NativeSelectOption(value: "sales_development") { "Sales Development" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Disabled", description: "Add the disabled attribute to the NativeSelect component to disable the select.", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            NativeSelect(disabled: true) do
+              NativeSelectOption(value: "") { "Select a fruit" }
+              NativeSelectOption(value: "apple") { "Apple" }
+              NativeSelectOption(value: "banana") { "Banana" }
+              NativeSelectOption(value: "blueberry") { "Blueberry" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Invalid", description: "Use aria-invalid to show validation errors.", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            NativeSelect(aria: {invalid: "true"}) do
+              NativeSelectOption(value: "") { "Select a fruit" }
+              NativeSelectOption(value: "apple") { "Apple" }
+              NativeSelectOption(value: "banana") { "Banana" }
+              NativeSelectOption(value: "blueberry") { "Blueberry" }
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Native Select vs Select" }
+
+      div(class: "space-y-2 text-sm text-muted-foreground") do
+        p { "NativeSelect: Choose for native browser behavior, superior performance, or mobile-optimized dropdowns." }
+        p { "Select: Choose for custom styling, animations, or complex interactions." }
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end
diff --git a/app/views/pages/home.rb b/app/views/pages/home.rb
index e476ffbf6..ca414e07b 100644
--- a/app/views/pages/home.rb
+++ b/app/views/pages/home.rb
@@ -2,216 +2,63 @@
 
 class Views::Pages::Home < Views::Base
   def view_template
-    render HomeView::Banner.new do |banner|
-      banner.cta do
-        Link(variant: :outline, href: docs_accordion_path, class: "text-center justify-center") { "Browse Components" }
-        Link(variant: :primary, href: docs_introduction_path, class: "text-center justify-center") do
-          plain "Get Started"
-          svg(
-            xmlns: "http://www.w3.org/2000/svg",
-            viewbox: "0 0 20 20",
-            fill: "currentColor",
-            class: "w-5 h-5 ml-1 -mr-1"
-          ) do |s|
-            s.path(
-              fill_rule: "evenodd",
-              d:
-                "M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z",
-              clip_rule: "evenodd"
-            )
-          end
+    # Hero Section
+    section(class: "space-y-6 pt-6 md:pt-10 lg:pt-16") do
+      div(class: "container flex max-w-[64rem] flex-col items-center gap-4 text-center mx-auto") do
+        Link(href: docs_changelog_path, variant: :outline, class: "rounded-2xl px-4 py-1.5 text-sm font-medium") do
+          span(class: "sm:hidden") { "New components available" }
+          span(class: "hidden sm:inline") { "Combobox updates and more" }
+          svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_linejoin: "round", class: "ml-2 h-4 w-4") { |s| s.path(d: "M5 12h14"); s.path(d: "m12 5 7 7-7 7") }
+        end
+        h1(class: "leading-tighter text-3xl font-semibold tracking-tight text-balance text-primary lg:leading-[1.1] lg:font-semibold xl:text-5xl xl:tracking-tighter max-w-4xl") do
+          "Build your compo­nent library."
+        end
+        p(class: "max-w-4xl text-base text-balance text-foreground sm:text-lg") do
+          "Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source."
+        end
+        div(class: "space-x-4 mt-4") do
+          Link(href: docs_introduction_path, variant: :primary, size: :lg) { "Documentation" }
+          Link(href: docs_components_path, variant: :outline, size: :lg) { "View Components" }
         end
       end
     end
 
-    div(class: "overflow-hidden") do
-      div(class: "container mx-auto max-w-5xl px-4 flex justify-center my-8") do
-        iframe(width: "100%", height: "720", src: "https://www.youtube.com/embed/OQZam7rug00?si=JmZNzS5u194Q0AWQ", title: "YouTube video player", frameborder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", referrerpolicy: "strict-origin-when-cross-origin", allowfullscreen: true)
-      end
-
-      div(class: "relative z-10 container mx-auto max-w-5xl pt-16 lg:pt-16 py-24 px-4") do
-        div(class: "grid grid-cols-6 gap-4") do
-          render HomeView::Card.new(class: "col-span-6 sm:col-span-3 md:col-span-4", title: "Built for Speed", subtitle: "Dive into a world where your Rails UI development happens at light speed. Phlex is not just fast - it's blazing fast.", color: :secondary) do |card|
-            card.icon do
-              svg(
-                xmlns: "http://www.w3.org/2000/svg",
-                viewbox: "0 0 24 24",
-                fill: "currentColor",
-                class: "w-6 h-6"
-              ) do |s|
-                s.path(
-                  fill_rule: "evenodd",
-                  d:
-                    "M12.963 2.286a.75.75 0 00-1.071-.136 9.742 9.742 0 00-3.539 6.177A7.547 7.547 0 016.648 6.61a.75.75 0 00-1.152-.082A9 9 0 1015.68 4.534a7.46 7.46 0 01-2.717-2.248zM15.75 14.25a3.75 3.75 0 11-7.313-1.172c.628.465 1.35.81 2.133 1a5.99 5.99 0 011.925-3.545 3.75 3.75 0 013.255 3.717z",
-                  clip_rule: "evenodd"
-                )
-              end
-            end
-          end
-          render HomeView::Card.new(class: "col-span-6 sm:col-span-3 md:col-span-2", color: :sky) do |card|
-            card.content do
-              div(class: "flex flex-col items-center justify-center text-center space-y-4 h-full") do
-                p(class: "text-6xl font-semibold") { "7.7x" }
-                p do
-                  a(href: "https://github.com/palkan/view-layer-benchmarks", class: "underline") { "Faster" }
-                  span { " than traditional Rails ERB" }
-                end
-              end
-            end
-          end
-          render HomeView::Card.new(class: "col-span-6 sm:col-span-3", title: "UI that... Wow!", subtitle: "Design stunning, streamlined, and customizable UIs that not only look great but sell your app without you lifting a finger.", color: :violet) do |card|
-            card.icon do
-              svg(
-                xmlns: "http://www.w3.org/2000/svg",
-                viewbox: "0 0 24 24",
-                fill: "currentColor",
-                class: "w-6 h-6"
-              ) do |s|
-                s.path(
-                  fill_rule: "evenodd",
-                  d:
-                    "M9 4.5a.75.75 0 01.721.544l.813 2.846a3.75 3.75 0 002.576 2.576l2.846.813a.75.75 0 010 1.442l-2.846.813a3.75 3.75 0 00-2.576 2.576l-.813 2.846a.75.75 0 01-1.442 0l-.813-2.846a3.75 3.75 0 00-2.576-2.576l-2.846-.813a.75.75 0 010-1.442l2.846-.813A3.75 3.75 0 007.466 7.89l.813-2.846A.75.75 0 019 4.5zM18 1.5a.75.75 0 01.728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 010 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 01-1.456 0l-.258-1.036a2.625 2.625 0 00-1.91-1.91l-1.036-.258a.75.75 0 010-1.456l1.036-.258a2.625 2.625 0 001.91-1.91l.258-1.036A.75.75 0 0118 1.5zM16.5 15a.75.75 0 01.712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 010 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 01-1.422 0l-.395-1.183a1.5 1.5 0 00-.948-.948l-1.183-.395a.75.75 0 010-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0116.5 15z",
-                  clip_rule: "evenodd"
-                )
-              end
-            end
-          end
-          render HomeView::Card.new(class: "col-span-6 sm:col-span-3", title: "Stay Organized", subtitle: "Say goodbye to clutter. With Phlex, your UI components are not only organized, but also easy to manage and track.", color: :secondary) do |card|
-            card.icon do
-              svg(
-                xmlns: "http://www.w3.org/2000/svg",
-                viewbox: "0 0 24 24",
-                fill: "currentColor",
-                class: "w-6 h-6"
-              ) do |s|
-                s.path(
-                  d:
-                    "M21 6.375c0 2.692-4.03 4.875-9 4.875S3 9.067 3 6.375 7.03 1.5 12 1.5s9 2.183 9 4.875z"
-                )
-                s.path(
-                  d:
-                    "M12 12.75c2.685 0 5.19-.586 7.078-1.609a8.283 8.283 0 001.897-1.384c.016.121.025.244.025.368C21 12.817 16.97 15 12 15s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.285 8.285 0 001.897 1.384C6.809 12.164 9.315 12.75 12 12.75z"
-                )
-                s.path(
-                  d:
-                    "M12 16.5c2.685 0 5.19-.586 7.078-1.609a8.282 8.282 0 001.897-1.384c.016.121.025.244.025.368 0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.284 8.284 0 001.897 1.384C6.809 15.914 9.315 16.5 12 16.5z"
-                )
-                s.path(
-                  d:
-                    "M12 20.25c2.685 0 5.19-.586 7.078-1.609a8.282 8.282 0 001.897-1.384c.016.121.025.244.025.368 0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.284 8.284 0 001.897 1.384C6.809 19.664 9.315 20.25 12 20.25z"
-                )
-              end
-            end
-          end
-          div(class: "relative col-span-6") do
-            render HomeView::Shapes.new(color: :violet, class: "hidden md:block absolute top-0 left-0 rotate-90 -translate-x-1/2 translate-y-full", size: :lg)
-            div(class: "mx-auto max-w-lg py-28") do
-              steps = [
-                {
-                  title: "Find the perfect component",
-                  description: "Each component is embedded live on the page so you can find exactly the design you want."
-                },
-                {
-                  title: "Copy the snippet",
-                  description: "Click the \"Code\" tab to see the code for a component and grab the part that you need, or click the clipboard button to quickly copy the entire snippet in one step."
-                },
-                {
-                  title: "Make it yours",
-                  description: "Every component is built entirely out of Tailwind utility classes, so you can easily dive in and adjust anything you want to better fit your use case."
-                }
-              ]
-              render HomeView::Steps.new(steps: steps)
-            end
-          end
-          render HomeView::Card.new(class: "col-span-6 md:col-span-4", title: "Customer-Centric UX", subtitle: "Create an app experience your users will rave about. RubyUI ensures that your user's journey is nothing less than memorable.", color: :pink) do |card|
-            card.icon do
-              svg(
-                xmlns: "http://www.w3.org/2000/svg",
-                viewbox: "0 0 24 24",
-                fill: "currentColor",
-                class: "w-6 h-6"
-              ) do |s|
-                s.path(
-                  d:
-                    "M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
-                )
-              end
-            end
-          end
-          render HomeView::Card.new(class: "col-span-6 md:col-span-2", title: "Completely Customisable", subtitle: "Have full control over the design of all components.", color: :amber) do |card|
-            card.icon do
-              svg(
-                xmlns: "http://www.w3.org/2000/svg",
-                viewbox: "0 0 24 24",
-                fill: "currentColor",
-                class: "w-6 h-6"
-              ) do |s|
-                s.path(
-                  fill_rule: "evenodd",
-                  d:
-                    "M20.599 1.5c-.376 0-.743.111-1.055.32l-5.08 3.385a18.747 18.747 0 00-3.471 2.987 10.04 10.04 0 014.815 4.815 18.748 18.748 0 002.987-3.472l3.386-5.079A1.902 1.902 0 0020.599 1.5zm-8.3 14.025a18.76 18.76 0 001.896-1.207 8.026 8.026 0 00-4.513-4.513A18.75 18.75 0 008.475 11.7l-.278.5a5.26 5.26 0 013.601 3.602l.502-.278zM6.75 13.5A3.75 3.75 0 003 17.25a1.5 1.5 0 01-1.601 1.497.75.75 0 00-.7 1.123 5.25 5.25 0 009.8-2.62 3.75 3.75 0 00-3.75-3.75z",
-                  clip_rule: "evenodd"
-                )
-              end
-            end
-          end
-          render HomeView::Card.new(class: "col-span-6 sm:col-span-3", title: "Minimal Dependencies", subtitle: "Keep your app lean and mean. With RubyUI, we use custom built Stimulus.js controllers wherever possible - less package dependencies to worry about.", color: :secondary) do |card|
-            card.icon do
-              svg(
-                xmlns: "http://www.w3.org/2000/svg",
-                viewbox: "0 0 24 24",
-                fill: "currentColor",
-                class: "w-6 h-6"
-              ) do |s|
-                s.path(
-                  d:
-                    "M7.493 18.75c-.425 0-.82-.236-.975-.632A7.48 7.48 0 016 15.375c0-1.75.599-3.358 1.602-4.634.151-.192.373-.309.6-.397.473-.183.89-.514 1.212-.924a9.042 9.042 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75 2.25 2.25 0 012.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H14.23c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23h-.777zM2.331 10.977a11.969 11.969 0 00-.831 4.398 12 12 0 00.52 3.507c.26.85 1.084 1.368 1.973 1.368H4.9c.445 0 .72-.498.523-.898a8.963 8.963 0 01-.924-3.977c0-1.708.476-3.305 1.302-4.666.245-.403-.028-.959-.5-.959H4.25c-.832 0-1.612.453-1.918 1.227z"
-                )
-              end
-            end
-          end
-          render HomeView::Card.new(class: "col-span-6 sm:col-span-3", title: "Reuse with Ease", subtitle: "Avoid the hassle of constantly reconstructing components. With Phlex, once built, use them seamlessly as needed.", color: :lime) do |card|
-            card.icon do
-              svg(
-                xmlns: "http://www.w3.org/2000/svg",
-                viewbox: "0 0 24 24",
-                fill: "currentColor",
-                class: "w-6 h-6"
-              ) do |s|
-                s.path(
-                  fill_rule: "evenodd",
-                  d:
-                    "M4.755 10.059a7.5 7.5 0 0112.548-3.364l1.903 1.903h-3.183a.75.75 0 100 1.5h4.992a.75.75 0 00.75-.75V4.356a.75.75 0 00-1.5 0v3.18l-1.9-1.9A9 9 0 003.306 9.67a.75.75 0 101.45.388zm15.408 3.352a.75.75 0 00-.919.53 7.5 7.5 0 01-12.548 3.364l-1.902-1.903h3.183a.75.75 0 000-1.5H2.984a.75.75 0 00-.75.75v4.992a.75.75 0 001.5 0v-3.18l1.9 1.9a9 9 0 0015.059-4.035.75.75 0 00-.53-.918z",
-                  clip_rule: "evenodd"
-                )
-              end
-            end
-          end
+    # Features / Components Showcase
+    section(class: "container space-y-6 py-8 md:py-12 lg:py-24 mx-auto max-w-5xl") do
+      div(class: "mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center") do
+        h2(class: "scroll-m-24 text-5xl font-semibold tracking-tight") { "Features" }
+        p(class: "max-w-[85%] leading-normal text-foreground sm:text-lg sm:leading-7") do
+          "This library comes packed with all the concepts and tools you need to build out your application."
         end
       end
-      div(class: "relative z-0 h-72 rotate-180 -mt-56 -mr-px") do
-        render Shared::GridPattern.new
+
+      # Features Grid
+      div(class: "mx-auto grid justify-center gap-4 sm:grid-cols-2 md:max-w-[64rem] md:grid-cols-3 pt-8") do
+        feature_card(title: "Built for Speed", description: "Dive into a world where your Rails UI development happens at light speed. Phlex is not just fast - it's blazing fast.")
+        feature_card(title: "Minimal Dependencies", description: "Keep your app lean and mean. With RubyUI, we use custom built Stimulus.js controllers wherever possible.")
+        feature_card(title: "Awesome UX", description: "Create an app experience your users will rave about. RubyUI ensures that your user's journey is memorable.")
+        feature_card(title: "Completely Customisable", description: "Have full control over the design of all components. Built using Tailwind utilities.")
+        feature_card(title: "Stay Organized", description: "Say goodbye to clutter. With Phlex, your UI components are not only organized, but also easy to manage.")
+        feature_card(title: "Reuse with Ease", description: "Avoid the hassle of constantly reconstructing components. With Phlex, once built, use them seamlessly.")
       end
-      div(class: "relative h-72") do
-        render Shared::GridPattern.new
+
+      # Video container
+      div(class: "flex justify-center mt-8 mb-12 py-12") do
+        iframe(width: "100%", height: "600", src: "https://www.youtube.com/embed/OQZam7rug00?si=JmZNzS5u194Q0AWQ", title: "YouTube video player", frameborder: "0", class: "rounded-xl border shadow-lg", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowfullscreen: true)
       end
     end
   end
 
-  def speed_tests
-    [
-      {
-        framework: "Phlex",
-        time: 1
-      },
-      {
-        framework: "ViewComponent",
-        time: 5.57
-      },
-      {
-        framework: "ERB Templates",
-        time: 12.08
-      }
-    ].sort_by { |test| test[:time] }
+  private
+
+  def feature_card(title:, description:)
+    div(class: "relative overflow-hidden rounded-lg border bg-background p-2") do
+      div(class: "flex h-[140px] flex-col justify-between rounded-md p-6") do
+        div(class: "space-y-2") do
+          h3(class: "font-bold text-lg") { title }
+          p(class: "text-base text-foreground leading-relaxed") { description }
+        end
+      end
+    end
   end
 end
diff --git a/config/routes.rb b/config/routes.rb
index a6da0ff23..bee400407 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -14,6 +14,8 @@
     get "installation/rails_importmaps", to: "docs#installation_rails_importmaps", as: :docs_installation_rails_importmaps
 
     # COMPONENTS
+    get "components", to: "docs#components", as: :docs_components
+    get "changelog", to: "docs#changelog", as: :docs_changelog
     get "accordion", to: "docs#accordion", as: :docs_accordion
     get "alert", to: "docs#alert_component", as: :docs_alert # alert is a reserved word for controller action
     get "alert_dialog", to: "docs#alert_dialog", as: :docs_alert_dialog
@@ -46,6 +48,7 @@
     get "popover", to: "docs#popover", as: :docs_popover
     get "progress", to: "docs#progress", as: :docs_progress
     get "radio_button", to: "docs#radio_button", as: :docs_radio_button
+    get "native_select", to: "docs#native_select", as: :docs_native_select
     get "select", to: "docs#select", as: :docs_select
     get "separator", to: "docs#separator", as: :docs_separator
     get "sheet", to: "docs#sheet", as: :docs_sheet

From 15de2a0b7107332833fa22e33e6f165981688ba7 Mon Sep 17 00:00:00 2001
From: Djalma <djalma@nossomos.cc>
Date: Tue, 31 Mar 2026 17:09:11 -0300
Subject: [PATCH 02/12] Add component mosaic to home and move video to
 introduction

---
 .../docs/getting_started/introduction.rb      |   1 +
 app/views/pages/home.rb                       | 180 ++++++++++++++++--
 2 files changed, 165 insertions(+), 16 deletions(-)

diff --git a/app/views/docs/getting_started/introduction.rb b/app/views/docs/getting_started/introduction.rb
index b56f3f3ba..1f86139a8 100644
--- a/app/views/docs/getting_started/introduction.rb
+++ b/app/views/docs/getting_started/introduction.rb
@@ -6,6 +6,7 @@ def view_template
       render Docs::Header.new(title: "Introduction", description: "Reusable UI components for Ruby developers")
 
       div(class: "space-y-4") do
+        iframe(width: "100%", height: "400", src: "https://www.youtube.com/embed/OQZam7rug00?si=JmZNzS5u194Q0AWQ", title: "YouTube video player", frameborder: "0", class: "rounded-xl border shadow-lg mb-10", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowfullscreen: true)
         Heading(level: 2) { "About" }
         Text do
           plain "RubyUI is a UI framework for Ruby developers, built on top of "
diff --git a/app/views/pages/home.rb b/app/views/pages/home.rb
index ca414e07b..659a9e23b 100644
--- a/app/views/pages/home.rb
+++ b/app/views/pages/home.rb
@@ -23,28 +23,176 @@ def view_template
       end
     end
 
-    # Features / Components Showcase
-    section(class: "container space-y-6 py-8 md:py-12 lg:py-24 mx-auto max-w-5xl") do
-      div(class: "mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center") do
-        h2(class: "scroll-m-24 text-5xl font-semibold tracking-tight") { "Features" }
+    # Components Mosaic Section
+    section(class: "container py-8 md:py-12 lg:py-24 mx-auto max-w-6xl") do
+      div(class: "mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center mb-12") do
+        h2(class: "scroll-m-24 text-4xl font-semibold tracking-tight") { "Modern components for modern applications" }
         p(class: "max-w-[85%] leading-normal text-foreground sm:text-lg sm:leading-7") do
-          "This library comes packed with all the concepts and tools you need to build out your application."
+          "Every component is built with Ruby, Phlex, and Tailwind CSS. No more context switching between languages."
         end
       end
 
-      # Features Grid
-      div(class: "mx-auto grid justify-center gap-4 sm:grid-cols-2 md:max-w-[64rem] md:grid-cols-3 pt-8") do
-        feature_card(title: "Built for Speed", description: "Dive into a world where your Rails UI development happens at light speed. Phlex is not just fast - it's blazing fast.")
-        feature_card(title: "Minimal Dependencies", description: "Keep your app lean and mean. With RubyUI, we use custom built Stimulus.js controllers wherever possible.")
-        feature_card(title: "Awesome UX", description: "Create an app experience your users will rave about. RubyUI ensures that your user's journey is memorable.")
-        feature_card(title: "Completely Customisable", description: "Have full control over the design of all components. Built using Tailwind utilities.")
-        feature_card(title: "Stay Organized", description: "Say goodbye to clutter. With Phlex, your UI components are not only organized, but also easy to manage.")
-        feature_card(title: "Reuse with Ease", description: "Avoid the hassle of constantly reconstructing components. With Phlex, once built, use them seamlessly.")
+      div(class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6") do
+        # COLUMN 1
+        div(class: "space-y-6") do
+          # PAYMENT CARD
+          Card do
+            CardHeader do
+              CardTitle { "Payment Method" }
+              CardDescription { "All transactions are secure and encrypted." }
+            end
+            CardContent(class: "space-y-4") do
+              div(class: "space-y-2") do
+                Label { "Name on Card" }
+                Input(placeholder: "John Doe")
+              end
+              div(class: "grid grid-cols-2 gap-4") do
+                div(class: "space-y-2") do
+                  Label { "Month" }
+                  Input(placeholder: "MM")
+                end
+                div(class: "space-y-2") do
+                  Label { "Year" }
+                  Input(placeholder: "YYYY")
+                end
+              end
+              div(class: "space-y-2") do
+                Label { "CVV" }
+                Input(placeholder: "123")
+              end
+            end
+            CardFooter do
+              Button(class: "w-full") { "Add Payment" }
+            end
+          end
+
+          # BADGES Showcase
+          Card do
+            CardContent(class: "pt-6 flex flex-wrap gap-2") do
+              Badge(variant: :default) { "Syncing" }
+              Badge(variant: :secondary) { "Updating" }
+              Badge(variant: :outline) { "Loading" }
+              Badge(variant: :destructive) { "Failed" }
+            end
+          end
+        end
+
+        # COLUMN 2
+        div(class: "space-y-6") do
+          # TEAM MEMBERS
+          Card do
+            CardHeader do
+              CardTitle { "Team Members" }
+              CardDescription { "Collaborate with your team." }
+            end
+            CardContent(class: "space-y-6") do
+              team_member("Sofia Davis", "@sdavis", "https://i.pravatar.cc/150?u=sofia")
+              team_member("Jackson Lee", "@jlee", "https://i.pravatar.cc/150?u=jackson")
+              team_member("Isabella Nguyen", "@isabella", "https://i.pravatar.cc/150?u=isabella")
+            end
+            CardFooter do
+              Button(variant: :outline, class: "w-full") { "Invite Members" }
+            end
+          end
+
+          # NOTIFICATIONS
+          Card do
+            CardHeader do
+              CardTitle { "Activity" }
+              CardDescription { "Last 24 hours" }
+            end
+            CardContent(class: "space-y-4") do
+              activity_item("New deployment", "2 minutes ago", :success)
+              activity_item("Database backup", "3 hours ago", :info)
+              activity_item("Security alert", "5 hours ago", :warning)
+            end
+          end
+        end
+
+        # COLUMN 3
+        div(class: "space-y-6") do
+          # SETTINGS / SWITCHES
+          Card do
+            CardHeader do
+              CardTitle { "Compute Environment" }
+              CardDescription { "Select your target cluster." }
+            end
+            CardContent(class: "space-y-4") do
+              div(class: "flex items-center justify-between rounded-lg border p-4 shadow-sm") do
+                div(class: "space-y-0.5") do
+                  p(class: "font-medium") { "Kubernetes" }
+                  p(class: "text-xs text-muted-foreground") { "Highly available cluster." }
+                end
+                Switch(checked: true)
+              end
+              div(class: "flex items-center justify-between rounded-lg border p-4 shadow-sm") do
+                div(class: "space-y-0.5") do
+                  p(class: "font-medium") { "Virtual Machine" }
+                  p(class: "text-xs text-muted-foreground") { "Dedicated server." }
+                end
+                Switch()
+              end
+            end
+          end
+
+          # CHAT / MESSAGE
+          Card do
+            CardHeader(class: "pb-2") do
+              div(class: "flex items-center gap-2") do
+                Avatar(size: :sm) do
+                  AvatarImage(src: "https://i.pravatar.cc/150?u=george", alt: "George")
+                  AvatarFallback { "GK" }
+                end
+                div do
+                  p(class: "text-sm font-semibold") { "George Kettle" }
+                  p(class: "text-xs text-muted-foreground") { "Creator of RubyUI" }
+                end
+              end
+            end
+            CardContent do
+              p(class: "text-sm bg-muted p-3 rounded-lg") do
+                "Hey! RubyUI is finally live. Let me know what you think of the new mosaic home page! 💎"
+              end
+            end
+            CardFooter(class: "pt-0") do
+              Input(placeholder: "Type a message...", class: "flex-1")
+              Button(icon: true, variant: :ghost, class: "ml-2") do
+                lucide_icon "send", class: "h-4 w-4"
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+
+  private
+
+  def team_member(name, handle, avatar_url)
+    div(class: "flex items-center justify-between") do
+      div(class: "flex items-center gap-4") do
+        Avatar do
+          AvatarImage(src: avatar_url, alt: name)
+          AvatarFallback { name.split.map(&:first).join }
+        end
+        div do
+          p(class: "text-sm font-medium leading-none") { name }
+          p(class: "text-xs text-muted-foreground") { handle }
+        end
       end
+      Button(variant: :ghost, size: :sm) { "Edit" }
+    end
+  end
 
-      # Video container
-      div(class: "flex justify-center mt-8 mb-12 py-12") do
-        iframe(width: "100%", height: "600", src: "https://www.youtube.com/embed/OQZam7rug00?si=JmZNzS5u194Q0AWQ", title: "YouTube video player", frameborder: "0", class: "rounded-xl border shadow-lg", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowfullscreen: true)
+  def activity_item(title, time, status)
+    div(class: "flex items-center gap-4") do
+      div(class: [
+        "h-2 w-2 rounded-full",
+        (status == :success ? "bg-green-500" : (status == :warning ? "bg-amber-500" : "bg-blue-500"))
+      ])
+      div do
+        p(class: "text-sm font-medium") { title }
+        p(class: "text-xs text-muted-foreground") { time }
       end
     end
   end

From f5d06ef1e8a6f034f406062eb93e5e90f61f3eac Mon Sep 17 00:00:00 2001
From: Djalma <djalma@nossomos.cc>
Date: Tue, 31 Mar 2026 18:10:40 -0300
Subject: [PATCH 03/12] Fix Label component error and verify home page mosaic

---
 app/views/pages/home.rb | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/views/pages/home.rb b/app/views/pages/home.rb
index 659a9e23b..3efb68067 100644
--- a/app/views/pages/home.rb
+++ b/app/views/pages/home.rb
@@ -43,21 +43,21 @@ def view_template
             end
             CardContent(class: "space-y-4") do
               div(class: "space-y-2") do
-                Label { "Name on Card" }
+                label { "Name on Card" }
                 Input(placeholder: "John Doe")
               end
               div(class: "grid grid-cols-2 gap-4") do
                 div(class: "space-y-2") do
-                  Label { "Month" }
+                  label { "Month" }
                   Input(placeholder: "MM")
                 end
                 div(class: "space-y-2") do
-                  Label { "Year" }
+                  label { "Year" }
                   Input(placeholder: "YYYY")
                 end
               end
               div(class: "space-y-2") do
-                Label { "CVV" }
+                label { "CVV" }
                 Input(placeholder: "123")
               end
             end

From 8e76314af977b9d88d7ebf229690e504da1b6980 Mon Sep 17 00:00:00 2001
From: Djalma <djalma@nossomos.cc>
Date: Tue, 31 Mar 2026 18:12:31 -0300
Subject: [PATCH 04/12] Final cleanup of home page and mosaic verification

---
 app/views/pages/home.rb | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/app/views/pages/home.rb b/app/views/pages/home.rb
index 3efb68067..e7f1f1e17 100644
--- a/app/views/pages/home.rb
+++ b/app/views/pages/home.rb
@@ -196,17 +196,4 @@ def activity_item(title, time, status)
       end
     end
   end
-
-  private
-
-  def feature_card(title:, description:)
-    div(class: "relative overflow-hidden rounded-lg border bg-background p-2") do
-      div(class: "flex h-[140px] flex-col justify-between rounded-md p-6") do
-        div(class: "space-y-2") do
-          h3(class: "font-bold text-lg") { title }
-          p(class: "text-base text-foreground leading-relaxed") { description }
-        end
-      end
-    end
-  end
 end

From 271086c017e32d3a73a62c0380ee43d25c69d923 Mon Sep 17 00:00:00 2001
From: Djalma <djalma@nossomos.cc>
Date: Tue, 31 Mar 2026 18:13:05 -0300
Subject: [PATCH 05/12] Update hero description with user provided Ruby-centric
 copy

---
 app/views/pages/home.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/pages/home.rb b/app/views/pages/home.rb
index e7f1f1e17..3e021efe7 100644
--- a/app/views/pages/home.rb
+++ b/app/views/pages/home.rb
@@ -11,10 +11,10 @@ def view_template
           svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_linejoin: "round", class: "ml-2 h-4 w-4") { |s| s.path(d: "M5 12h14"); s.path(d: "m12 5 7 7-7 7") }
         end
         h1(class: "leading-tighter text-3xl font-semibold tracking-tight text-balance text-primary lg:leading-[1.1] lg:font-semibold xl:text-5xl xl:tracking-tighter max-w-4xl") do
-          "Build your compo­nent library."
+          "Build your component library."
         end
         p(class: "max-w-4xl text-base text-balance text-foreground sm:text-lg") do
-          "Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source."
+          "A UI component library, crafted precisely for Ruby devs who want to stay organised and build modern apps, fast."
         end
         div(class: "space-x-4 mt-4") do
           Link(href: docs_introduction_path, variant: :primary, size: :lg) { "Documentation" }

From 6673e1a217f6408cc043ff41cfc1a8f61938467e Mon Sep 17 00:00:00 2001
From: Djalma <djalma@nossomos.cc>
Date: Tue, 31 Mar 2026 18:21:10 -0300
Subject: [PATCH 06/12] Update home page headline to: Build sharp Ruby
 interfaces.

---
 app/views/pages/home.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/pages/home.rb b/app/views/pages/home.rb
index 3e021efe7..eb374410a 100644
--- a/app/views/pages/home.rb
+++ b/app/views/pages/home.rb
@@ -11,7 +11,7 @@ def view_template
           svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_linejoin: "round", class: "ml-2 h-4 w-4") { |s| s.path(d: "M5 12h14"); s.path(d: "m12 5 7 7-7 7") }
         end
         h1(class: "leading-tighter text-3xl font-semibold tracking-tight text-balance text-primary lg:leading-[1.1] lg:font-semibold xl:text-5xl xl:tracking-tighter max-w-4xl") do
-          "Build your component library."
+          "Build sharp Ruby interfaces."
         end
         p(class: "max-w-4xl text-base text-balance text-foreground sm:text-lg") do
           "A UI component library, crafted precisely for Ruby devs who want to stay organised and build modern apps, fast."

From 7ce75709deb6c6826ac91c1094774c9561479a1f Mon Sep 17 00:00:00 2001
From: Djalma <djalma@nossomos.cc>
Date: Tue, 31 Mar 2026 18:23:56 -0300
Subject: [PATCH 07/12] Implement rotating headlines and expand component
 showcase mosaic

---
 app/views/pages/home.rb | 70 +++++++++++++++++++++++------------------
 1 file changed, 39 insertions(+), 31 deletions(-)

diff --git a/app/views/pages/home.rb b/app/views/pages/home.rb
index eb374410a..fae899b64 100644
--- a/app/views/pages/home.rb
+++ b/app/views/pages/home.rb
@@ -11,7 +11,13 @@ def view_template
           svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_linejoin: "round", class: "ml-2 h-4 w-4") { |s| s.path(d: "M5 12h14"); s.path(d: "m12 5 7 7-7 7") }
         end
         h1(class: "leading-tighter text-3xl font-semibold tracking-tight text-balance text-primary lg:leading-[1.1] lg:font-semibold xl:text-5xl xl:tracking-tighter max-w-4xl") do
-          "Build sharp Ruby interfaces."
+          [
+            "Build sharp Ruby interfaces.",
+            "Reusable UI components for Ruby developers.",
+            "Pure Ruby UI, built with Phlex.",
+            "Elevate your Rails apps with RubyUI.",
+            "The sharpest way to build in Ruby."
+          ].sample
         end
         p(class: "max-w-4xl text-base text-balance text-foreground sm:text-lg") do
           "A UI component library, crafted precisely for Ruby devs who want to stay organised and build modern apps, fast."
@@ -25,13 +31,6 @@ def view_template
 
     # Components Mosaic Section
     section(class: "container py-8 md:py-12 lg:py-24 mx-auto max-w-6xl") do
-      div(class: "mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center mb-12") do
-        h2(class: "scroll-m-24 text-4xl font-semibold tracking-tight") { "Modern components for modern applications" }
-        p(class: "max-w-[85%] leading-normal text-foreground sm:text-lg sm:leading-7") do
-          "Every component is built with Ruby, Phlex, and Tailwind CSS. No more context switching between languages."
-        end
-      end
-
       div(class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6") do
         # COLUMN 1
         div(class: "space-y-6") do
@@ -56,16 +55,19 @@ def view_template
                   Input(placeholder: "YYYY")
                 end
               end
-              div(class: "space-y-2") do
-                label { "CVV" }
-                Input(placeholder: "123")
-              end
             end
             CardFooter do
               Button(class: "w-full") { "Add Payment" }
             end
           end
 
+          # ALERT Showcase
+          Alert do
+            lucide_icon "terminal", class: "h-4 w-4"
+            AlertTitle { "Heads up!" }
+            AlertDescription { "You can add components directly to your app using Phlex." }
+          end
+
           # BADGES Showcase
           Card do
             CardContent(class: "pt-6 flex flex-wrap gap-2") do
@@ -73,12 +75,32 @@ def view_template
               Badge(variant: :secondary) { "Updating" }
               Badge(variant: :outline) { "Loading" }
               Badge(variant: :destructive) { "Failed" }
+              Badge { "Success" }
             end
           end
         end
 
         # COLUMN 2
         div(class: "space-y-6") do
+          # TABS
+          Tabs(default_value: "account") do
+            TabsList(class: "grid w-full grid-cols-2") do
+              TabsTrigger(value: "account") { "Account" }
+              TabsTrigger(value: "password") { "Password" }
+            end
+            TabsContent(value: "account") do
+              Card do
+                CardHeader do
+                  CardTitle { "Account" }
+                  CardDescription { "Make changes to your account here." }
+                end
+                CardFooter do
+                  Button(size: :sm) { "Save changes" }
+                end
+              end
+            end
+          end
+
           # TEAM MEMBERS
           Card do
             CardHeader do
@@ -88,25 +110,11 @@ def view_template
             CardContent(class: "space-y-6") do
               team_member("Sofia Davis", "@sdavis", "https://i.pravatar.cc/150?u=sofia")
               team_member("Jackson Lee", "@jlee", "https://i.pravatar.cc/150?u=jackson")
-              team_member("Isabella Nguyen", "@isabella", "https://i.pravatar.cc/150?u=isabella")
             end
             CardFooter do
               Button(variant: :outline, class: "w-full") { "Invite Members" }
             end
           end
-
-          # NOTIFICATIONS
-          Card do
-            CardHeader do
-              CardTitle { "Activity" }
-              CardDescription { "Last 24 hours" }
-            end
-            CardContent(class: "space-y-4") do
-              activity_item("New deployment", "2 minutes ago", :success)
-              activity_item("Database backup", "3 hours ago", :info)
-              activity_item("Security alert", "5 hours ago", :warning)
-            end
-          end
         end
 
         # COLUMN 3
@@ -114,8 +122,8 @@ def view_template
           # SETTINGS / SWITCHES
           Card do
             CardHeader do
-              CardTitle { "Compute Environment" }
-              CardDescription { "Select your target cluster." }
+              CardTitle { "Settings" }
+              CardDescription { "Manage your preferences." }
             end
             CardContent(class: "space-y-4") do
               div(class: "flex items-center justify-between rounded-lg border p-4 shadow-sm") do
@@ -127,8 +135,8 @@ def view_template
               end
               div(class: "flex items-center justify-between rounded-lg border p-4 shadow-sm") do
                 div(class: "space-y-0.5") do
-                  p(class: "font-medium") { "Virtual Machine" }
-                  p(class: "text-xs text-muted-foreground") { "Dedicated server." }
+                  p(class: "font-medium") { "Dark Mode" }
+                  p(class: "text-xs text-muted-foreground") { "Use the dark theme." }
                 end
                 Switch()
               end
@@ -151,7 +159,7 @@ def view_template
             end
             CardContent do
               p(class: "text-sm bg-muted p-3 rounded-lg") do
-                "Hey! RubyUI is finally live. Let me know what you think of the new mosaic home page! 💎"
+                "Build sharp. Build Ruby. 💎"
               end
             end
             CardFooter(class: "pt-0") do

From 43310385ad7afd25765c61b689d618b8f3101935 Mon Sep 17 00:00:00 2001
From: Djalma <djalma@nossomos.cc>
Date: Tue, 31 Mar 2026 21:13:40 -0300
Subject: [PATCH 08/12] Add footer, expand team members, and refine layouts for
 consistent site-wide branding

---
 app/components/shared/footer.rb         |  31 +++++
 app/views/layouts/application_layout.rb |   1 +
 app/views/layouts/docs_layout.rb        |   1 +
 app/views/layouts/pages_layout.rb       |   1 +
 app/views/pages/home.rb                 | 152 ++++++++++++++++++------
 5 files changed, 147 insertions(+), 39 deletions(-)
 create mode 100644 app/components/shared/footer.rb

diff --git a/app/components/shared/footer.rb b/app/components/shared/footer.rb
new file mode 100644
index 000000000..13dbcc87e
--- /dev/null
+++ b/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
diff --git a/app/views/layouts/application_layout.rb b/app/views/layouts/application_layout.rb
index 80a886c5b..252d2ec8c 100644
--- a/app/views/layouts/application_layout.rb
+++ b/app/views/layouts/application_layout.rb
@@ -15,6 +15,7 @@ def view_template(&block)
             script(defer: true, data_domain: "rubyui.com", src: "https://plausible.io/js/script.js")
             render Shared::Navbar.new
             main(&block)
+            render Shared::Footer.new
             render Shared::Flashes.new(notice: flash[:notice], alert: flash[:alert])
           end
         end
diff --git a/app/views/layouts/docs_layout.rb b/app/views/layouts/docs_layout.rb
index 8d94ea90e..85fe4adc3 100644
--- a/app/views/layouts/docs_layout.rb
+++ b/app/views/layouts/docs_layout.rb
@@ -21,6 +21,7 @@ def view_template(&block)
                 end
               end
             end
+            render Shared::Footer.new
             render Shared::Flashes.new(notice: flash[:notice], alert: flash[:alert])
           end
         end
diff --git a/app/views/layouts/pages_layout.rb b/app/views/layouts/pages_layout.rb
index 98bfc95ef..9bd8c1ec6 100644
--- a/app/views/layouts/pages_layout.rb
+++ b/app/views/layouts/pages_layout.rb
@@ -14,6 +14,7 @@ def view_template(&block)
           body do
             render Shared::Navbar.new
             main(class: "relative", &block)
+            render Shared::Footer.new
             render Shared::Flashes.new(notice: flash[:notice], alert: flash[:alert])
           end
         end
diff --git a/app/views/pages/home.rb b/app/views/pages/home.rb
index fae899b64..1000c0090 100644
--- a/app/views/pages/home.rb
+++ b/app/views/pages/home.rb
@@ -36,28 +36,46 @@ def view_template
         div(class: "space-y-6") do
           # PAYMENT CARD
           Card do
-            CardHeader do
+            CardHeader(class: "space-y-1") do
               CardTitle { "Payment Method" }
               CardDescription { "All transactions are secure and encrypted." }
             end
-            CardContent(class: "space-y-4") do
-              div(class: "space-y-2") do
-                label { "Name on Card" }
+            CardContent(class: "grid gap-4") do
+              div(class: "grid gap-2") do
+                Label { "Name on Card" }
                 Input(placeholder: "John Doe")
               end
-              div(class: "grid grid-cols-2 gap-4") do
-                div(class: "space-y-2") do
-                  label { "Month" }
-                  Input(placeholder: "MM")
+              div(class: "grid gap-2") do
+                Label { "Card Number" }
+                Input(placeholder: "1234 5678 9012 3456")
+              end
+              div(class: "grid grid-cols-3 gap-4") do
+                div(class: "grid gap-2 col-span-2") do
+                  Label { "Expires" }
+                  div(class: "grid grid-cols-2 gap-2") do
+                    Button(variant: :outline, class: "justify-between text-muted-foreground font-normal") do
+                      span { "Month" }
+                      lucide_icon "chevron-down", class: "h-3 w-3 opacity-50"
+                    end
+                    Button(variant: :outline, class: "justify-between text-muted-foreground font-normal") do
+                      span { "Year" }
+                      lucide_icon "chevron-down", class: "h-3 w-3 opacity-50"
+                    end
+                  end
                 end
-                div(class: "space-y-2") do
-                  label { "Year" }
-                  Input(placeholder: "YYYY")
+                div(class: "grid gap-2") do
+                  Label { "CVV" }
+                  Input(placeholder: "CVV")
                 end
               end
+              div(class: "flex items-center space-x-2 pt-2") do
+                Checkbox(id: "shipping")
+                Label(for: "shipping", class: "text-sm font-normal") { "Same as shipping address" }
+              end
             end
-            CardFooter do
-              Button(class: "w-full") { "Add Payment" }
+            CardFooter(class: "flex justify-between gap-2") do
+              Button(variant: :outline, class: "flex-1") { "Cancel" }
+              Button(class: "flex-1") { "Pay Now" }
             end
           end
 
@@ -68,14 +86,18 @@ def view_template
             AlertDescription { "You can add components directly to your app using Phlex." }
           end
 
-          # BADGES Showcase
+          # ACTIVITY FEED
           Card do
-            CardContent(class: "pt-6 flex flex-wrap gap-2") do
-              Badge(variant: :default) { "Syncing" }
-              Badge(variant: :secondary) { "Updating" }
-              Badge(variant: :outline) { "Loading" }
-              Badge(variant: :destructive) { "Failed" }
-              Badge { "Success" }
+            CardHeader(class: "pb-3") do
+              CardTitle { "Activity Feed" }
+            end
+            CardContent(class: "flex flex-wrap gap-2") do
+              Badge(variant: :sky) { "In Review" }
+              Badge(variant: :success) { "Ready to Ship" }
+              Badge(variant: :outline) { "Draft" }
+              Badge(variant: :destructive) { "Rejected" }
+              Badge(variant: :primary) { "Deployed" }
+              Badge(variant: :amber) { "Agent Thinking" }
             end
           end
         end
@@ -94,8 +116,18 @@ def view_template
                   CardTitle { "Account" }
                   CardDescription { "Make changes to your account here." }
                 end
+                CardContent(class: "space-y-2") do
+                  div(class: "space-y-1") do
+                    Label { "Username" }
+                    Input(placeholder: "@djalma")
+                  end
+                  div(class: "space-y-1") do
+                    Label { "Email" }
+                    Input(placeholder: "djalma@nossomos.cc")
+                  end
+                end
                 CardFooter do
-                  Button(size: :sm) { "Save changes" }
+                  Button(size: :sm, class: "w-full") { "Save changes" }
                 end
               end
             end
@@ -110,6 +142,8 @@ def view_template
             CardContent(class: "space-y-6") do
               team_member("Sofia Davis", "@sdavis", "https://i.pravatar.cc/150?u=sofia")
               team_member("Jackson Lee", "@jlee", "https://i.pravatar.cc/150?u=jackson")
+              team_member("Djalma Araújo", "@djalma", "https://i.pravatar.cc/150?u=djalma")
+              team_member("George Kettle", "@gkettle", "https://i.pravatar.cc/150?u=george")
             end
             CardFooter do
               Button(variant: :outline, class: "w-full") { "Invite Members" }
@@ -119,6 +153,22 @@ def view_template
 
         # COLUMN 3
         div(class: "space-y-6") do
+          # PROGRESS / QUOTA
+          Card do
+            CardHeader(class: "pb-4") do
+              div(class: "flex items-center justify-between") do
+                CardTitle { "Storage Usage" }
+                span(class: "text-xs text-muted-foreground") { "12.4GB / 20GB" }
+              end
+            end
+            CardContent do
+              Progress(value: 62)
+            end
+            CardFooter do
+              Button(variant: :ghost, size: :sm, class: "w-full text-xs") { "Upgrade Plan" }
+            end
+          end
+
           # SETTINGS / SWITCHES
           Card do
             CardHeader do
@@ -128,14 +178,14 @@ def view_template
             CardContent(class: "space-y-4") do
               div(class: "flex items-center justify-between rounded-lg border p-4 shadow-sm") do
                 div(class: "space-y-0.5") do
-                  p(class: "font-medium") { "Kubernetes" }
+                  p(class: "font-medium text-sm") { "Kubernetes" }
                   p(class: "text-xs text-muted-foreground") { "Highly available cluster." }
                 end
                 Switch(checked: true)
               end
               div(class: "flex items-center justify-between rounded-lg border p-4 shadow-sm") do
                 div(class: "space-y-0.5") do
-                  p(class: "font-medium") { "Dark Mode" }
+                  p(class: "font-medium text-sm") { "Dark Mode" }
                   p(class: "text-xs text-muted-foreground") { "Use the dark theme." }
                 end
                 Switch()
@@ -143,29 +193,47 @@ def view_template
             end
           end
 
-          # CHAT / MESSAGE
+          # AI AGENT CHAT
           Card do
             CardHeader(class: "pb-2") do
-              div(class: "flex items-center gap-2") do
-                Avatar(size: :sm) do
-                  AvatarImage(src: "https://i.pravatar.cc/150?u=george", alt: "George")
-                  AvatarFallback { "GK" }
+              div(class: "flex items-center justify-between") do
+                CardTitle { "AI Assistant" }
+                Badge(variant: :secondary, size: :sm) { "v4.0" }
+              end
+            end
+            CardContent(class: "space-y-4") do
+              div(class: "max-w-[80%] rounded-lg bg-muted p-3 text-sm") do
+                "How can I help you build with Ruby today?"
+              end
+              div(class: "flex flex-wrap gap-2") do
+                Button(variant: :outline, size: :sm, class: "h-7 text-[10px] gap-1") do
+                  lucide_icon "plus", class: "h-3 w-3"
+                  span { "Add Context" }
                 end
-                div do
-                  p(class: "text-sm font-semibold") { "George Kettle" }
-                  p(class: "text-xs text-muted-foreground") { "Creator of RubyUI" }
+                Button(variant: :outline, size: :sm, class: "h-7 text-[10px] gap-1") do
+                  lucide_icon "globe", class: "h-3 w-3"
+                  span { "Web Search" }
                 end
               end
             end
-            CardContent do
-              p(class: "text-sm bg-muted p-3 rounded-lg") do
-                "Build sharp. Build Ruby. 💎"
+            CardFooter(class: "flex flex-col gap-3 pt-0") do
+              div(class: "flex items-center w-full gap-2") do
+                Button(variant: :ghost, size: :icon, class: "h-8 w-8 shrink-0") do
+                  lucide_icon "plus-circle", class: "h-4 w-4"
+                end
+                div(class: "relative flex-1") do
+                  Input(placeholder: "Ask anything...", class: "pr-10 h-10")
+                  Button(variant: :primary, size: :icon, class: "absolute right-1 top-1 h-8 w-8") do
+                    lucide_icon "arrow-up", class: "h-4 w-4"
+                  end
+                end
               end
-            end
-            CardFooter(class: "pt-0") do
-              Input(placeholder: "Type a message...", class: "flex-1")
-              Button(icon: true, variant: :ghost, class: "ml-2") do
-                lucide_icon "send", class: "h-4 w-4"
+              div(class: "flex items-center gap-2 text-[10px] text-muted-foreground") do
+                lucide_icon "zap", class: "h-3 w-3"
+                span { "GPT-4o" }
+                span(class: "mx-1") { "•" }
+                lucide_icon "layers", class: "h-3 w-3"
+                span { "Professional Plan" }
               end
             end
           end
@@ -176,6 +244,12 @@ def view_template
 
   private
 
+  def Label(class: nil, **attrs, &block)
+    base_classes = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+    
+    label(class: [base_classes, binding.local_variable_get(:class)], **attrs, &block)
+  end
+
   def team_member(name, handle, avatar_url)
     div(class: "flex items-center justify-between") do
       div(class: "flex items-center gap-4") do

From cede1761deca632947d218b5e33dec754b4ce56c Mon Sep 17 00:00:00 2001
From: Djalma <djalma@nossomos.cc>
Date: Tue, 31 Mar 2026 21:30:35 -0300
Subject: [PATCH 09/12] docs: attribute George Kettle as the original author in
 introduction

---
 app/views/docs/getting_started/introduction.rb | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/views/docs/getting_started/introduction.rb b/app/views/docs/getting_started/introduction.rb
index 1f86139a8..0c1ad949f 100644
--- a/app/views/docs/getting_started/introduction.rb
+++ b/app/views/docs/getting_started/introduction.rb
@@ -64,8 +64,19 @@ def view_template
         end
       end
 
-      div(class: "space-y-4") do
-        Heading(level: 2) { "Why I built RubyUI" }
+      div(class: "pt-10 border-t space-y-8") do
+        Heading(level: 1) { "Notes from the original author" }
+        
+        div(class: "flex items-center gap-3") do
+          Avatar(size: :md, class: "border") { img(src: "https://i.pravatar.cc/150?u=george", alt: "George Kettle") }
+          div do
+            p(class: "text-sm font-medium leading-none") { "George Kettle" }
+            p(class: "text-sm text-muted-foreground") { "Original author of RubyUI" }
+          end
+        end
+
+        div(class: "space-y-4") do
+          Heading(level: 2) { "Why I built RubyUI" }
         Text do
           plain "Many Ruby developers are familiar with "
           InlineLink(href: "https://rubyonrails.org") { "Rails" }
@@ -145,6 +156,7 @@ def view_template
             plain " - Thanks for all the ideas, feedback and support."
           end
         end
+        end
       end
     end
   end

From efedfd000a6b92fd297acbf8227a2c52d305be12 Mon Sep 17 00:00:00 2001
From: Djalma <djalma@nossomos.cc>
Date: Wed, 15 Apr 2026 14:46:34 -0300
Subject: [PATCH 10/12] chore: rename PhlexUI references to ruby_ui

---
 app/components/docs/tailwind_config.rb        |  2 +-
 app/components/shared/menu.rb                 |  2 +-
 app/components/shared/navbar.rb               |  4 ++--
 app/components/themes/grid/command.rb         | 20 +++++++++----------
 app/components/themes/grid/repo_tabs.rb       | 10 +++++-----
 app/components/themes/grid/table.rb           |  8 ++++----
 app/helpers/application_helper.rb             |  2 +-
 app/views/docs/accordion.rb                   |  6 +++---
 app/views/docs/chart.rb                       |  4 ++--
 .../getting_started/customizing_components.rb |  6 +++---
 app/views/docs/hover_card.rb                  |  8 ++++----
 11 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/app/components/docs/tailwind_config.rb b/app/components/docs/tailwind_config.rb
index 146739bd0..40d9cd669 100644
--- a/app/components/docs/tailwind_config.rb
+++ b/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')
diff --git a/app/components/shared/menu.rb b/app/components/shared/menu.rb
index 9d2369d8c..8046f4a2f 100644
--- a/app/components/shared/menu.rb
+++ b/app/components/shared/menu.rb
@@ -12,7 +12,7 @@ def view_template
             main_link("Docs", docs_introduction_path)
             main_link("Components", docs_components_path)
             main_link("Themes", theme_path("default"))
-            main_link("Github", "https://github.com/PhlexUI/phlex_ui")
+            main_link("Github", "https://github.com/ruby-ui/ruby_ui")
             main_link("Discord", ENV["DISCORD_INVITE_LINK"])
             main_link("Discord", ENV["DISCORD_INVITE_LINK"])
           end
diff --git a/app/components/shared/navbar.rb b/app/components/shared/navbar.rb
index 1bd7b11da..10063d484 100644
--- a/app/components/shared/navbar.rb
+++ b/app/components/shared/navbar.rb
@@ -82,7 +82,7 @@ def search_button
               end
             end
           end
-          CommandDialogContent(class: "overflow-hidden p-0 shadow-2xl top-[10%] translate-y-0") do
+          CommandDialogContent(class: "overflow-hidden p-0 shadow-2xl") do
             Command(class: "flex h-full w-full flex-col overflow-hidden") do
               CommandInput(placeholder: "Search documentation...", class: "border-none focus:ring-0")
               CommandEmpty { "No results found." }
@@ -106,7 +106,7 @@ def search_button
       end
 
       def github_link
-        Link(href: "https://github.com/PhlexUI/phlex_ui", variant: :ghost, icon: true) do
+        Link(href: "https://github.com/ruby-ui/ruby_ui", variant: :ghost, icon: true) do
           github_icon
         end
       end
diff --git a/app/components/themes/grid/command.rb b/app/components/themes/grid/command.rb
index 789b8bdf5..d0ad5e9e2 100644
--- a/app/components/themes/grid/command.rb
+++ b/app/components/themes/grid/command.rb
@@ -51,16 +51,16 @@ def view_template
 
         def components
           [
-            ::Docs::ComponentStruct.new(name: "CommandController", source: "https://github.com/PhlexUI/phlex_ui_stimulus_pro/blob/main/controllers/command_controller.js", built_using: :stimulus),
-            ::Docs::ComponentStruct.new(name: "CommandDialog", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/dialog.rb", built_using: :phlex),
-            ::Docs::ComponentStruct.new(name: "CommandDialogTrigger", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/dialog_trigger.rb", built_using: :phlex),
-            ::Docs::ComponentStruct.new(name: "CommandDialogContent", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/dialog_content.rb", built_using: :phlex),
-            ::Docs::ComponentStruct.new(name: "Command", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command.rb", built_using: :phlex),
-            ::Docs::ComponentStruct.new(name: "CommandInput", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/input.rb", built_using: :phlex),
-            ::Docs::ComponentStruct.new(name: "CommandEmpty", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/empty.rb", built_using: :phlex),
-            ::Docs::ComponentStruct.new(name: "CommandList", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/list.rb", built_using: :phlex),
-            ::Docs::ComponentStruct.new(name: "CommandGroup", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/group.rb", built_using: :phlex),
-            ::Docs::ComponentStruct.new(name: "CommandItem", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/item.rb", built_using: :phlex)
+            ::Docs::ComponentStruct.new(name: "CommandController", source: "https://github.com/ruby-ui/ruby_ui_stimulus_pro/blob/main/controllers/command_controller.js", built_using: :stimulus),
+            ::Docs::ComponentStruct.new(name: "CommandDialog", source: "https://github.com/ruby-ui/ruby_ui_pro/blob/main/lib/ruby_ui_pro/command/dialog.rb", built_using: :phlex),
+            ::Docs::ComponentStruct.new(name: "CommandDialogTrigger", source: "https://github.com/ruby-ui/ruby_ui_pro/blob/main/lib/ruby_ui_pro/command/dialog_trigger.rb", built_using: :phlex),
+            ::Docs::ComponentStruct.new(name: "CommandDialogContent", source: "https://github.com/ruby-ui/ruby_ui_pro/blob/main/lib/ruby_ui_pro/command/dialog_content.rb", built_using: :phlex),
+            ::Docs::ComponentStruct.new(name: "Command", source: "https://github.com/ruby-ui/ruby_ui_pro/blob/main/lib/ruby_ui_pro/command.rb", built_using: :phlex),
+            ::Docs::ComponentStruct.new(name: "CommandInput", source: "https://github.com/ruby-ui/ruby_ui_pro/blob/main/lib/ruby_ui_pro/command/input.rb", built_using: :phlex),
+            ::Docs::ComponentStruct.new(name: "CommandEmpty", source: "https://github.com/ruby-ui/ruby_ui_pro/blob/main/lib/ruby_ui_pro/command/empty.rb", built_using: :phlex),
+            ::Docs::ComponentStruct.new(name: "CommandList", source: "https://github.com/ruby-ui/ruby_ui_pro/blob/main/lib/ruby_ui_pro/command/list.rb", built_using: :phlex),
+            ::Docs::ComponentStruct.new(name: "CommandGroup", source: "https://github.com/ruby-ui/ruby_ui_pro/blob/main/lib/ruby_ui_pro/command/group.rb", built_using: :phlex),
+            ::Docs::ComponentStruct.new(name: "CommandItem", source: "https://github.com/ruby-ui/ruby_ui_pro/blob/main/lib/ruby_ui_pro/command/item.rb", built_using: :phlex)
           ]
         end
 
diff --git a/app/components/themes/grid/repo_tabs.rb b/app/components/themes/grid/repo_tabs.rb
index 2184e0e48..bd7ce8aa0 100644
--- a/app/components/themes/grid/repo_tabs.rb
+++ b/app/components/themes/grid/repo_tabs.rb
@@ -43,11 +43,11 @@ def view_template
 
         def components
           [
-            ::Docs::ComponentStruct.new(name: "TabsController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/tabs_controller.js", built_using: :stimulus),
-            ::Docs::ComponentStruct.new(name: "Tabs", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tabs.rb", built_using: :phlex),
-            ::Docs::ComponentStruct.new(name: "TabsList", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tabs/list.rb", built_using: :phlex),
-            ::Docs::ComponentStruct.new(name: "TabsTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tabs/trigger.rb", built_using: :phlex),
-            ::Docs::ComponentStruct.new(name: "TabsContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tabs/content.rb", built_using: :phlex)
+            ::Docs::ComponentStruct.new(name: "TabsController", source: "https://github.com/ruby-ui/ruby_ui_stimulus/blob/main/controllers/tabs_controller.js", built_using: :stimulus),
+            ::Docs::ComponentStruct.new(name: "Tabs", source: "https://github.com/ruby-ui/ruby_ui/blob/main/lib/ruby_ui/tabs.rb", built_using: :phlex),
+            ::Docs::ComponentStruct.new(name: "TabsList", source: "https://github.com/ruby-ui/ruby_ui/blob/main/lib/ruby_ui/tabs/list.rb", built_using: :phlex),
+            ::Docs::ComponentStruct.new(name: "TabsTrigger", source: "https://github.com/ruby-ui/ruby_ui/blob/main/lib/ruby_ui/tabs/trigger.rb", built_using: :phlex),
+            ::Docs::ComponentStruct.new(name: "TabsContent", source: "https://github.com/ruby-ui/ruby_ui/blob/main/lib/ruby_ui/tabs/content.rb", built_using: :phlex)
           ]
         end
 
diff --git a/app/components/themes/grid/table.rb b/app/components/themes/grid/table.rb
index 81e894bba..0f8a61896 100644
--- a/app/components/themes/grid/table.rb
+++ b/app/components/themes/grid/table.rb
@@ -7,11 +7,11 @@ class Table < Components::Base
         User = Struct.new(:avatar_url, :name, :username, :commits, :github_url, keyword_init: true)
 
         # def view_template
-        #   render PhlexUI::Card.new(class: "p-6") do
-        #     render PhlexUI::Table::Builder.new(users) do |t|
+        #   render RubyUI::Card.new(class: "p-6") do
+        #     render RubyUI::Table::Builder.new(users) do |t|
         #       t.column("Name") do |user|
         #         div(class: "flex items-center space-x-3") do
-        #           render PhlexUI::Avatar::Builder.new(src: user.avatar_url, size: :md)
+        #           render RubyUI::Avatar::Builder.new(src: user.avatar_url, size: :md)
         #           div do
         #             p(class: "text-sm font-medium") { user.name }
         #             p(class: "text-sm text-gray-500") { user.username }
@@ -21,7 +21,7 @@ class Table < Components::Base
         #       t.column("Commits", &:commits)
         #       t.column("Links", header_attrs: {class: "text-right"}, footer_attrs: {class: "text-right"}) do |user|
         #         div(class: "flex items-center justify-end space-x-2") do
-        #           render PhlexUI::Link.new(href: github_link(user), variant: :outline, size: :sm) do
+        #           render RubyUI::Link.new(href: github_link(user), variant: :outline, size: :sm) do
         #             github_icon
         #             span(class: "ml-2") { "See profile" }
         #           end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 14b9df619..71014d37b 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -21,7 +21,7 @@ def component_files(component, gem_name = "ruby_ui")
       basename = File.basename(file, ext)
 
       name = basename.camelize
-      # source = "https://github.com/PhlexUI/phlex_ui/blob/v1/lib/ruby_ui/#{component.to_s.downcase}/#{File.basename(file)}"
+      # source = "https://github.com/ruby-ui/ruby_ui/blob/v1/lib/ruby_ui/#{component.to_s.downcase}/#{File.basename(file)}"
       source = "lib/ruby_ui/#{camel_to_snake(component)}/#{File.basename(file)}"
       built_using = if ext == ".rb"
         :phlex
diff --git a/app/views/docs/accordion.rb b/app/views/docs/accordion.rb
index 7f7558223..f899a3d76 100644
--- a/app/views/docs/accordion.rb
+++ b/app/views/docs/accordion.rb
@@ -15,13 +15,13 @@ def view_template
             Accordion do
               AccordionItem do
                 AccordionTrigger do
-                  p(class: "font-medium") { "What is PhlexUI?" }
+                  p(class: "font-medium") { "What is RubyUI?" }
                   AccordionIcon()
                 end
 
                 AccordionContent do
                   p(class: "text-sm pb-4") do
-                    "PhlexUI is a UI component library for Ruby devs who want to build better, faster."
+                    "RubyUI is a UI component library for Ruby devs who want to build better, faster."
                   end
                 end
               end
@@ -36,7 +36,7 @@ def view_template
 
                 AccordionContent do
                   p(class: "text-sm pb-4") do
-                    "Yes, PhlexUI is pure Ruby and works great with Rails. It's a Ruby gem that you can install into your Rails app."
+                    "Yes, RubyUI is pure Ruby and works great with Rails. It's a Ruby gem that you can install into your Rails app."
                   end
                 end
               end
diff --git a/app/views/docs/chart.rb b/app/views/docs/chart.rb
index 6aaf88ed0..70db2742d 100644
--- a/app/views/docs/chart.rb
+++ b/app/views/docs/chart.rb
@@ -108,8 +108,8 @@ def view_template
 
   def components
     [
-      ::Docs::ComponentStruct.new(name: "ChartController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/chart_controller.js", built_using: :stimulus),
-      ::Docs::ComponentStruct.new(name: "Chart", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/chart.rb", built_using: :phlex)
+      ::Docs::ComponentStruct.new(name: "ChartController", source: "https://github.com/ruby-ui/ruby_ui_stimulus/blob/main/controllers/chart_controller.js", built_using: :stimulus),
+      ::Docs::ComponentStruct.new(name: "Chart", source: "https://github.com/ruby-ui/ruby_ui/blob/main/lib/ruby_ui/chart.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/docs/getting_started/customizing_components.rb b/app/views/docs/getting_started/customizing_components.rb
index 4c363f5e1..a839bdf8c 100644
--- a/app/views/docs/getting_started/customizing_components.rb
+++ b/app/views/docs/getting_started/customizing_components.rb
@@ -61,7 +61,7 @@ def view_template
               plain "First, find the source code for the component you want to redefine. In this case, we want to redefine the "
               InlineCode { "Alert" }
               plain " component, so we'll find the source code for the alert component "
-              InlineLink(href: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert.rb") { "here on Github" }
+              InlineLink(href: "https://github.com/ruby-ui/ruby_ui/blob/main/lib/ruby_ui/alert.rb") { "here on Github" }
               plain "."
             end
           end
@@ -122,7 +122,7 @@ def view_template
         Components.TypographyList(numbered: true) do
           Components.TypographyListItem do
             plain "Check the "
-            InlineLink(href: "https://github.com/PhlexUI/phlex_ui") { "RubyUI GitHub repository" }
+            InlineLink(href: "https://github.com/ruby-ui/ruby_ui") { "RubyUI GitHub repository" }
             plain " to see if the component is already planned"
           end
           Components.TypographyListItem { "Open an issue or discussion to propose the new component" }
@@ -141,7 +141,7 @@ def alert_component_definition
     <<~RUBY
       # frozen_string_literal: true
 
-      module PhlexUI
+      module RubyUI
         class Alert < Base
           def initialize(variant: nil, **attrs)
             @variant = variant
diff --git a/app/views/docs/hover_card.rb b/app/views/docs/hover_card.rb
index 1aa18ed55..3512d127e 100644
--- a/app/views/docs/hover_card.rb
+++ b/app/views/docs/hover_card.rb
@@ -62,10 +62,10 @@ def view_template
 
   # def components
   #   [
-  #     Docs::ComponentStruct.new(name: "PopoverController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/popover_controller.js", built_using: :stimulus),
-  #     Docs::ComponentStruct.new(name: "HoverCard", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/hover_card.rb", built_using: :phlex),
-  #     Docs::ComponentStruct.new(name: "HoverCardTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/hover_card/trigger.rb", built_using: :phlex),
-  #     Docs::ComponentStruct.new(name: "HoverCardContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/hover_card/content.rb", built_using: :phlex)
+  #     Docs::ComponentStruct.new(name: "PopoverController", source: "https://github.com/ruby-ui/ruby_ui_stimulus/blob/main/controllers/popover_controller.js", built_using: :stimulus),
+  #     Docs::ComponentStruct.new(name: "HoverCard", source: "https://github.com/ruby-ui/ruby_ui/blob/main/lib/ruby_ui/hover_card.rb", built_using: :phlex),
+  #     Docs::ComponentStruct.new(name: "HoverCardTrigger", source: "https://github.com/ruby-ui/ruby_ui/blob/main/lib/ruby_ui/hover_card/trigger.rb", built_using: :phlex),
+  #     Docs::ComponentStruct.new(name: "HoverCardContent", source: "https://github.com/ruby-ui/ruby_ui/blob/main/lib/ruby_ui/hover_card/content.rb", built_using: :phlex)
   #   ]
   # end
 end

From d78696d030c8f1752f7340838aa7e12bddb6c3a6 Mon Sep 17 00:00:00 2001
From: Djalma <djalma@nossomos.cc>
Date: Wed, 15 Apr 2026 22:11:25 -0300
Subject: [PATCH 11/12] chore: remove local dev overrides from compose.yaml

---
 .devcontainer/compose.yaml | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/.devcontainer/compose.yaml b/.devcontainer/compose.yaml
index 651ee1193..b891aefe2 100644
--- a/.devcontainer/compose.yaml
+++ b/.devcontainer/compose.yaml
@@ -8,10 +8,6 @@ services:
 
     volumes:
     - ../../web:/workspaces/web:cached
-    - ../../ruby_ui:/workspaces/ruby_ui:cached
-    
-    ports:
-    - "3001:3000"
 
     # Overrides default command so things don't shut down after the process ends.
     command: sleep infinity

From f2c86533eb0d5d340a8fdc5b8e94298a3580fe57 Mon Sep 17 00:00:00 2001
From: Djalma <djalma@nossomos.cc>
Date: Wed, 15 Apr 2026 22:38:40 -0300
Subject: [PATCH 12/12] fix(lint): fix standardrb violations across navbar,
 home, introduction, changelog

---
 app/components/shared/navbar.rb               |   7 +-
 app/views/docs/changelog.rb                   |   5 +-
 .../docs/getting_started/introduction.rb      | 142 +++++++++---------
 app/views/pages/home.rb                       |  13 +-
 4 files changed, 89 insertions(+), 78 deletions(-)

diff --git a/app/components/shared/navbar.rb b/app/components/shared/navbar.rb
index 10063d484..c8d45178e 100644
--- a/app/components/shared/navbar.rb
+++ b/app/components/shared/navbar.rb
@@ -71,9 +71,12 @@ def dark_mode_toggle
 
       def search_button
         CommandDialog do
-          CommandDialogTrigger(keybindings: ['keydown.ctrl+k@window', 'keydown.meta+k@window']) do
+          CommandDialogTrigger(keybindings: ["keydown.ctrl+k@window", "keydown.meta+k@window"]) do
             Button(variant: :outline, class: "relative h-8 w-full justify-start rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64") do
-              svg(xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_linejoin: "round", class: "mr-2") { |s| s.circle(cx: "11", cy: "11", r: "8"); s.path(d: "m21 21-4.3-4.3") }
+              svg(xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_linejoin: "round", class: "mr-2") { |s|
+                s.circle(cx: "11", cy: "11", r: "8")
+                s.path(d: "m21 21-4.3-4.3")
+              }
               span(class: "hidden lg:inline-flex") { "Search documentation..." }
               span(class: "inline-flex lg:hidden") { "Search..." }
               kbd(class: "pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex") do
diff --git a/app/views/docs/changelog.rb b/app/views/docs/changelog.rb
index 2c4618669..18066a731 100644
--- a/app/views/docs/changelog.rb
+++ b/app/views/docs/changelog.rb
@@ -1,6 +1,7 @@
 # frozen_string_literal: true
+
 require "rss"
-require "open-uri"
+require "net/http"
 
 class Views::Docs::Changelog < Views::Base
   def view_template
@@ -38,7 +39,7 @@ def view_template
   def releases
     @releases ||= begin
       url = "https://github.com/ruby-ui/ruby_ui/releases.atom"
-      feed = RSS::Parser.parse(URI.open(url).read, false)
+      feed = RSS::Parser.parse(Net::HTTP.get(URI.parse(url)), false)
       feed.items.map do |item|
         {
           name: item.title.content,
diff --git a/app/views/docs/getting_started/introduction.rb b/app/views/docs/getting_started/introduction.rb
index 0c1ad949f..7eaa124de 100644
--- a/app/views/docs/getting_started/introduction.rb
+++ b/app/views/docs/getting_started/introduction.rb
@@ -66,7 +66,7 @@ def view_template
 
       div(class: "pt-10 border-t space-y-8") do
         Heading(level: 1) { "Notes from the original author" }
-        
+
         div(class: "flex items-center gap-3") do
           Avatar(size: :md, class: "border") { img(src: "https://i.pravatar.cc/150?u=george", alt: "George Kettle") }
           div do
@@ -77,85 +77,85 @@ def view_template
 
         div(class: "space-y-4") do
           Heading(level: 2) { "Why I built RubyUI" }
-        Text do
-          plain "Many Ruby developers are familiar with "
-          InlineLink(href: "https://rubyonrails.org") { "Rails" }
-          plain ", and the "
-          InlineLink(href: "https://guides.rubyonrails.org/layouts_and_rendering.html") { "convention over configuration" }
-          plain " approach it takes. RubyUI is built on the same principles, providing a set of components that are easy to use, and easy to customize."
-        end
-        Text do
-          plain "RubyUI was born out of a desire for a comprehensive UI framework designed with Ruby developers in mind. While I've previously utilized TailwindUI and other solutions, none seemed to fit just right. The plethora of UI component libraries available for JavaScript frameworks highlighted a gap in the Ruby ecosystem, which RubyUI aims to fill."
-        end
-        Text do
-          plain "Upon discovering Phlex, it became clear that it was the ideal foundation for such a library. It offered the potential for a powerful, easy-to-use, and customizable component library when paired with StimulusJS. The goal was to create a tool that leverages the strengths of TailwindCSS and StimulusJS, providing Ruby developers with a comprehensive UI solution that is stylable at the HTML level."
-        end
-      end
-
-      div(class: "space-y-4") do
-        Heading(level: 2) { "Goals of RubyUI" }
-        Components.TypographyList(numbered: true) do
-          Components.TypographyListItem { "Create a reusable UI component library specifically for Ruby devs" }
-          Components.TypographyListItem { "Enable Ruby devs to create custom and complex UIs without needing to write CSS or JS" }
+          Text do
+            plain "Many Ruby developers are familiar with "
+            InlineLink(href: "https://rubyonrails.org") { "Rails" }
+            plain ", and the "
+            InlineLink(href: "https://guides.rubyonrails.org/layouts_and_rendering.html") { "convention over configuration" }
+            plain " approach it takes. RubyUI is built on the same principles, providing a set of components that are easy to use, and easy to customize."
+          end
+          Text do
+            plain "RubyUI was born out of a desire for a comprehensive UI framework designed with Ruby developers in mind. While I've previously utilized TailwindUI and other solutions, none seemed to fit just right. The plethora of UI component libraries available for JavaScript frameworks highlighted a gap in the Ruby ecosystem, which RubyUI aims to fill."
+          end
+          Text do
+            plain "Upon discovering Phlex, it became clear that it was the ideal foundation for such a library. It offered the potential for a powerful, easy-to-use, and customizable component library when paired with StimulusJS. The goal was to create a tool that leverages the strengths of TailwindCSS and StimulusJS, providing Ruby developers with a comprehensive UI solution that is stylable at the HTML level."
+          end
         end
-      end
 
-      div(class: "space-y-4") do
-        Heading(level: 2) { "My experience using Phlex" }
-        Text do
-          span(class: "font-medium") { "I was initially skeptical about Phlex. " }
-          plain "I worried about using an abstraction layer on top of HTML and thought this would be a bad move. However, after trying it I realised that I was wrong, and "
-          span(class: "font-medium") { "I know others who have had the same experience as myself" }
-          plain "."
-        end
-        Text { "After some time using Phlex, it's obvious to me that this is a better way to render your views in Ruby apps. Phlex is intuitive and simple. It is also incredibly fast (12x faster than ERB, 5x faster than ViewComponent), it also makes your code more organised and leads to a better developer experience." }
-        Text(size: "4", weight: "semibold") { "Same same, but different" }
-        Text do
-          plain "Phlex is essentially just HTML in Ruby form, bundled into a component. It's a simple concept, but it's incredibly powerful. It allows you to write your views in pure Ruby, without the need for a templating language. This means you can use all the features of Ruby, including loops, conditionals, and more."
-        end
-        Text do
-          plain "As an example, if you want to render a "
-          InlineCode { "<p class='text-sm font-muted-foreground'>Phlex. Same same, but different.</p>" }
-          plain " element, you can do it like this "
-          InlineCode { "p(class: 'text-sm font-muted-foreground') { 'Phlex. Same same, but different.' }" }
-          plain "."
-        end
-        Text do
-          plain "This is a simple example, but it's easy to see how this can be scaled up to more complex views. "
-          span(class: "font-medium") { "It's only natural that we use logic to build HTML" }
-          plain ". Phlex simplifies this process, making it easier to convert data structures into HTML."
+        div(class: "space-y-4") do
+          Heading(level: 2) { "Goals of RubyUI" }
+          Components.TypographyList(numbered: true) do
+            Components.TypographyListItem { "Create a reusable UI component library specifically for Ruby devs" }
+            Components.TypographyListItem { "Enable Ruby devs to create custom and complex UIs without needing to write CSS or JS" }
+          end
         end
-      end
 
-      div(class: "space-y-4") do
-        Heading(level: 2) { "Acknowledgments" }
-        Text { "I'd like to thank the following projects and people for helping me build RubyUI" }
-        Components.TypographyList do
-          Components.TypographyListItem do
-            InlineLink(href: "https://github.com/joeldrapper") { "Joel Drapper" }
-            plain " - Thanks for creating Phlex, and for your support and advice."
-          end
-          Components.TypographyListItem do
-            InlineLink(href: "https://phlex.fun") { "Phlex" }
-            plain " - The foundation of RubyUI."
+        div(class: "space-y-4") do
+          Heading(level: 2) { "My experience using Phlex" }
+          Text do
+            span(class: "font-medium") { "I was initially skeptical about Phlex. " }
+            plain "I worried about using an abstraction layer on top of HTML and thought this would be a bad move. However, after trying it I realised that I was wrong, and "
+            span(class: "font-medium") { "I know others who have had the same experience as myself" }
+            plain "."
           end
-          Components.TypographyListItem do
-            InlineLink(href: "https://ui.shadcn.com") { "shadcn/ui" }
-            plain " - The design inspiration for RubyUI's components and theming system."
+          Text { "After some time using Phlex, it's obvious to me that this is a better way to render your views in Ruby apps. Phlex is intuitive and simple. It is also incredibly fast (12x faster than ERB, 5x faster than ViewComponent), it also makes your code more organised and leads to a better developer experience." }
+          Text(size: "4", weight: "semibold") { "Same same, but different" }
+          Text do
+            plain "Phlex is essentially just HTML in Ruby form, bundled into a component. It's a simple concept, but it's incredibly powerful. It allows you to write your views in pure Ruby, without the need for a templating language. This means you can use all the features of Ruby, including loops, conditionals, and more."
           end
-          Components.TypographyListItem do
-            InlineLink(href: "https://stimulus.hotwired.dev") { "Stimulus JS" }
-            plain " - A quicker way to write JavaScript."
+          Text do
+            plain "As an example, if you want to render a "
+            InlineCode { "<p class='text-sm font-muted-foreground'>Phlex. Same same, but different.</p>" }
+            plain " element, you can do it like this "
+            InlineCode { "p(class: 'text-sm font-muted-foreground') { 'Phlex. Same same, but different.' }" }
+            plain "."
           end
-          Components.TypographyListItem do
-            InlineLink(href: "http://tailwindcss.com") { "TailwindCSS" }
-            plain " - I wouldn't build without it."
-          end
-          Components.TypographyListItem do
-            InlineLink(href: "https://twitter.com/george_kettle") { "My Twitter followers" }
-            plain " - Thanks for all the ideas, feedback and support."
+          Text do
+            plain "This is a simple example, but it's easy to see how this can be scaled up to more complex views. "
+            span(class: "font-medium") { "It's only natural that we use logic to build HTML" }
+            plain ". Phlex simplifies this process, making it easier to convert data structures into HTML."
           end
         end
+
+        div(class: "space-y-4") do
+          Heading(level: 2) { "Acknowledgments" }
+          Text { "I'd like to thank the following projects and people for helping me build RubyUI" }
+          Components.TypographyList do
+            Components.TypographyListItem do
+              InlineLink(href: "https://github.com/joeldrapper") { "Joel Drapper" }
+              plain " - Thanks for creating Phlex, and for your support and advice."
+            end
+            Components.TypographyListItem do
+              InlineLink(href: "https://phlex.fun") { "Phlex" }
+              plain " - The foundation of RubyUI."
+            end
+            Components.TypographyListItem do
+              InlineLink(href: "https://ui.shadcn.com") { "shadcn/ui" }
+              plain " - The design inspiration for RubyUI's components and theming system."
+            end
+            Components.TypographyListItem do
+              InlineLink(href: "https://stimulus.hotwired.dev") { "Stimulus JS" }
+              plain " - A quicker way to write JavaScript."
+            end
+            Components.TypographyListItem do
+              InlineLink(href: "http://tailwindcss.com") { "TailwindCSS" }
+              plain " - I wouldn't build without it."
+            end
+            Components.TypographyListItem do
+              InlineLink(href: "https://twitter.com/george_kettle") { "My Twitter followers" }
+              plain " - Thanks for all the ideas, feedback and support."
+            end
+          end
         end
       end
     end
diff --git a/app/views/pages/home.rb b/app/views/pages/home.rb
index 1000c0090..88deffb8b 100644
--- a/app/views/pages/home.rb
+++ b/app/views/pages/home.rb
@@ -8,7 +8,10 @@ def view_template
         Link(href: docs_changelog_path, variant: :outline, class: "rounded-2xl px-4 py-1.5 text-sm font-medium") do
           span(class: "sm:hidden") { "New components available" }
           span(class: "hidden sm:inline") { "Combobox updates and more" }
-          svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_linejoin: "round", class: "ml-2 h-4 w-4") { |s| s.path(d: "M5 12h14"); s.path(d: "m12 5 7 7-7 7") }
+          svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_linejoin: "round", class: "ml-2 h-4 w-4") { |s|
+            s.path(d: "M5 12h14")
+            s.path(d: "m12 5 7 7-7 7")
+          }
         end
         h1(class: "leading-tighter text-3xl font-semibold tracking-tight text-balance text-primary lg:leading-[1.1] lg:font-semibold xl:text-5xl xl:tracking-tighter max-w-4xl") do
           [
@@ -246,7 +249,7 @@ def view_template
 
   def Label(class: nil, **attrs, &block)
     base_classes = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-    
+
     label(class: [base_classes, binding.local_variable_get(:class)], **attrs, &block)
   end
 
@@ -270,7 +273,11 @@ def activity_item(title, time, status)
     div(class: "flex items-center gap-4") do
       div(class: [
         "h-2 w-2 rounded-full",
-        (status == :success ? "bg-green-500" : (status == :warning ? "bg-amber-500" : "bg-blue-500"))
+        (if status == :success
+           "bg-green-500"
+         else
+           ((status == :warning) ? "bg-amber-500" : "bg-blue-500")
+         end)
       ])
       div do
         p(class: "text-sm font-medium") { title }