From f8c9eb0390c4aeccc83f306f16c5b1b7f071688d Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Tue, 2 Jul 2024 14:48:37 +0000
Subject: [PATCH] Revamp all pages

---
 Gemfile                                       |   2 +-
 Gemfile.lock                                  |   5 +-
 app/views/components/docs/components_table.rb |  51 +--
 .../installation_instructions_coming_soon.rb  |   2 +-
 app/views/components/docs/premium_badge.rb    |   2 +-
 app/views/docs/accordion_view.rb              |  41 +--
 app/views/docs/alert_dialog_view.rb           |  40 +--
 app/views/docs/alert_view.rb                  |  38 +--
 app/views/docs/aspect_ratio_view.rb           |  12 +-
 app/views/docs/avatar_view.rb                 |  81 ++---
 app/views/docs/badge_view.rb                  |  56 ++--
 app/views/docs/button_view.rb                 |  26 +-
 app/views/docs/calendar_view.rb               |  26 +-
 app/views/docs/card_view.rb                   |  58 ++--
 app/views/docs/chart_view.rb                  |  18 +-
 app/views/docs/checkbox_view.rb               |   8 +-
 app/views/docs/collapsible_view.rb            |  24 +-
 app/views/docs/command_view.rb                |  70 ++--
 app/views/docs/context_menu_view.rb           | 108 +++----
 app/views/docs/date_picker_view.rb            |  36 +--
 app/views/docs/dialog_view.rb                 |  90 +++---
 app/views/docs/dropdown_menu_view.rb          | 300 +++++++++---------
 .../docs/getting_started/dark_mode_view.rb    |   2 +-
 .../docs/getting_started/theming_view.rb      |  12 +-
 app/views/docs/hover_card_view.rb             |  22 +-
 app/views/docs/input_view.rb                  |  65 ++--
 app/views/docs/link_view.rb                   |  18 +-
 app/views/docs/pagination_view.rb             |  32 +-
 app/views/docs/popover_view.rb                | 202 ++++++------
 app/views/docs/select_view.rb                 |  70 ++--
 app/views/docs/sheet_view.rb                  | 246 +++++++-------
 app/views/docs/shortcut_key_view.rb           |   6 +-
 app/views/docs/table_view.rb                  |  97 ++----
 app/views/docs/tabs_view.rb                   | 113 +++----
 app/views/docs/theme_toggle_view.rb           |  16 +-
 app/views/docs/tooltip_view.rb                |  18 +-
 app/views/docs/typography_view.rb             |  56 ++--
 .../errors/internal_server_error_view.rb      |  10 +-
 app/views/errors/not_found_view.rb            |  10 +-
 app/views/pages/home_view.rb                  |   4 +-
 app/views/themes/copy_code.rb                 |  18 +-
 app/views/themes/customize_popover.rb         |  14 +-
 app/views/themes/grid/calendar.rb             |   4 +-
 app/views/themes/grid/card.rb                 |  18 +-
 app/views/themes/grid/chart.rb                |   8 +-
 app/views/themes/grid/chat.rb                 |  22 +-
 app/views/themes/grid/command.rb              |  44 +--
 app/views/themes/grid/create_event.rb         |  32 +-
 app/views/themes/grid/line_graph.rb           |   8 +-
 app/views/themes/grid/repo_tabs.rb            |  52 +--
 app/views/themes/grid/signin.rb               |  34 +-
 app/views/themes/grid/table.rb                |  48 +--
 app/views/themes/show_view.rb                 |   6 +-
 53 files changed, 1129 insertions(+), 1272 deletions(-)

diff --git a/Gemfile b/Gemfile
index 48e8bb0..4afcb6d 100644
--- a/Gemfile
+++ b/Gemfile
@@ -88,4 +88,4 @@ gem "rollbar"
 gem "phlex-rails"
 # gem "phlex_ui"
 # gem "phlex_ui", path: "../phlex_ui"
-gem "phlex_ui", git: "https://github.com/cirdes/phlex_ui.git", branch: "cirdes:fix-clipboard"
+gem "phlex_ui", git: "https://github.com/cirdes/phlex_ui.git", branch: "fix-clipboard"
diff --git a/Gemfile.lock b/Gemfile.lock
index a9f38a1..b7a8194 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,6 +1,7 @@
 GIT
-  remote: https://github.com/PhlexUI/phlex_ui.git
-  revision: ab73874f4a437a92c8c721fff8f37cfad6196cd1
+  remote: https://github.com/cirdes/phlex_ui.git
+  revision: b20cee8f8bb143c019a58d6b0a9abbddf65c61b4
+  branch: fix-clipboard
   specs:
     phlex_ui (0.1.10)
       activesupport (>= 6.0)
diff --git a/app/views/components/docs/components_table.rb b/app/views/components/docs/components_table.rb
index 47806fb..358dddb 100644
--- a/app/views/components/docs/components_table.rb
+++ b/app/views/components/docs/components_table.rb
@@ -8,29 +8,40 @@ def initialize(components)
   def view_template
     TypographyH2 { "Components" }
     div(class: "border rounded-lg overflow-hidden") do
-      Table::Builder.new(@components) do |t|
-        t.column("Component") do |component|
-          div(class: "flex items-center space-x-2") do
-            render PhlexUI::Typography::InlineCode.new { component.name }
-            if component.builder
-              render PhlexUI::Badge.new(size: :sm, variant: :sky) { "Builder" }
+      Table do
+        TableHeader do
+          TableRow do
+            div(class: "flex items-center space-x-2") do
+              TableHead { "Component" }
             end
+            TableHead(class: "w-full grow-1") { "Built using" }
+            TableHead(class: "text-right") { "Source" }
           end
         end
-        t.column("Built using", header_attrs: {class: "w-full grow-1"}) do |component|
-          component.built_using
-          case component.built_using&.to_sym
-          when :phlex
-            render PhlexUI::Badge.new(size: :sm, variant: :rose) { "Phlex" }
-          when :stimulus
-            render PhlexUI::Badge.new(size: :sm, variant: :amber) { "Stimulus JS" }
-          end
-        end
-        t.column("Source", header_attrs: {class: "text-right"}) do |component|
-          div(class: "flex justify-end") do
-            render PhlexUI::Link.new(href: component.source, variant: :outline, size: :sm) do
-              github_icon
-              span(class: "ml-2") { "See source" }
+
+        TableBody do
+          @components.each do |component|
+            TableRow do
+              TableCell do
+                TypographyInlineCode { component.name }
+              end
+              TableCell do
+                component.built_using
+                case component.built_using&.to_sym
+                when :phlex
+                  Badge(size: :sm, variant: :rose) { "Phlex" }
+                when :stimulus
+                  Badge(size: :sm, variant: :amber) { "Stimulus JS" }
+                end
+              end
+              TableCell do
+                div(class: "flex justify-end") do
+                  Link(href: component.source, variant: :outline, size: :sm) do
+                    github_icon
+                    span(class: "ml-2") { "See source" }
+                  end
+                end
+              end
             end
           end
         end
diff --git a/app/views/components/docs/installation_instructions_coming_soon.rb b/app/views/components/docs/installation_instructions_coming_soon.rb
index 2370128..d236fbd 100644
--- a/app/views/components/docs/installation_instructions_coming_soon.rb
+++ b/app/views/components/docs/installation_instructions_coming_soon.rb
@@ -18,7 +18,7 @@ def render_header
       end
       div(class: "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border") do
         div(class: "preview flex min-h-[350px] w-full justify-center p-10 items-center") do
-          render PhlexUI::Typography::P.new(class: "text-muted-foreground text-center flex flex-col sm:flex-row items-center gap-y-2 gap-x-2") do
+          TypographyP(class: "text-muted-foreground text-center flex flex-col sm:flex-row items-center gap-y-2 gap-x-2") do
             svg(
               xmlns: "http://www.w3.org/2000/svg",
               fill: "none",
diff --git a/app/views/components/docs/premium_badge.rb b/app/views/components/docs/premium_badge.rb
index 9d72222..e1d805d 100644
--- a/app/views/components/docs/premium_badge.rb
+++ b/app/views/components/docs/premium_badge.rb
@@ -2,7 +2,7 @@
 
 class Docs::PremiumBadge < ApplicationComponent
   def view_template
-    render PhlexUI::Badge.new(variant: :violet) do
+    Badge(variant: :violet) do
       svg(
         xmlns: "http://www.w3.org/2000/svg",
         viewbox: "0 0 24 24",
diff --git a/app/views/docs/accordion_view.rb b/app/views/docs/accordion_view.rb
index 53ad74b..377592f 100644
--- a/app/views/docs/accordion_view.rb
+++ b/app/views/docs/accordion_view.rb
@@ -5,29 +5,19 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Accordion", description: "A vertically stacked set of interactive headings that each reveal a section of content.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
-
-      render Docs::VisualCodeExample.new(title: "With Builder", context: self) do
-        <<~RUBY
-          render PhlexUI::Accordion::Builder.new do |accordion|
-            accordion.add_item("Item 1", "Content 1")
-            accordion.add_item("Item 2", "Content 2")
-            accordion.add_item("Item 3", "Content 3")
-          end
-        RUBY
-      end
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Custom Design", context: self) do
         <<~RUBY
-          render PhlexUI::Accordion.new(class: 'space-y-1') do
-            render PhlexUI::Accordion::Item.new(
+          Accordion(class: 'space-y-1') do
+            AccordionItem(
                     class!:
                       "data-[accordion-open-value=true]:bg-muted hover:bg-muted rounded-lg pb-3",
                     rotate_icon: 135
                   ) do
-              render PhlexUI::Accordion::Trigger.new(class!: "w-full rounded-lg") do
+              AccordionTrigger(class!: "w-full rounded-lg") do
                 div(class: "p-6 pb-3 pl-16 relative text-left") do
-                  render PhlexUI::Accordion::Icon.new(class: "absolute left-6 top-6") do
+                  AccordionIcon(class: "absolute left-6 top-6") do
                     svg(
                       xmlns: "http://www.w3.org/2000/svg",
                       fill: "none",
@@ -47,21 +37,21 @@ def view_template
                 end
               end
 
-              render PhlexUI::Accordion::Content.new do
+              AccordionContent do
                 p(class: "pl-16 pr-4 pb-4 text-muted-foreground") do
                   "PhlexUI is a UI component library for Ruby devs who want to build better, faster."
                 end
               end
             end
 
-            render PhlexUI::Accordion::Item.new(
+            AccordionItem(
                     class!:
                       "data-[accordion-open-value=true]:bg-muted hover:bg-muted rounded-lg pb-3",
                     rotate_icon: 135
                   ) do
-              render PhlexUI::Accordion::Trigger.new(class!: "w-full rounded-lg") do
+              AccordionTrigger(class!: "w-full rounded-lg") do
                 div(class: "p-6 pb-3 pl-16 relative text-left") do
-                  render PhlexUI::Accordion::Icon.new(class: "absolute left-6 top-6") do
+                  AccordionIcon(class: "absolute left-6 top-6") do
                     svg(
                       xmlns: "http://www.w3.org/2000/svg",
                       fill: "none",
@@ -81,7 +71,7 @@ def view_template
                 end
               end
 
-              render PhlexUI::Accordion::Content.new do
+              AccordionContent do
                 p(class: "pl-16 pr-4 pb-4 text-muted-foreground") do
                   "Yes, PhlexUI is pure Ruby and works great with Rails. It's a Ruby gem that you can install into your Rails app."
                 end
@@ -100,12 +90,11 @@ def view_template
   def components
     [
       Docs::ComponentStruct.new(name: "AccordionController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/accordion_controller.js", built_using: :stimulus),
-      Docs::ComponentStruct.new(name: "PhlexUI::Accordion", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Accordion::Builder", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/builder.rb", builder: true, built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Accordion::Item", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/item.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Accordion::Trigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/item.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Accordion::Content", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/content.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Accordion::Icon", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/icon.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Accordion", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AccordionItem", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/item.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AccordionTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/item.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AccordionContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/content.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AccordionIcon", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/icon.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/docs/alert_dialog_view.rb b/app/views/docs/alert_dialog_view.rb
index 5fa22b6..373ee64 100644
--- a/app/views/docs/alert_dialog_view.rb
+++ b/app/views/docs/alert_dialog_view.rb
@@ -5,21 +5,21 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Alert Dialog", description: "A modal dialog that interrupts the user with important content and expects a response.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
       render Docs::VisualCodeExample.new(title: "Example", context: self) do
         <<~RUBY
-          render PhlexUI::AlertDialog.new do
-            render PhlexUI::AlertDialog::Trigger.new do
-              render PhlexUI::Button.new { "Show dialog" }
+          AlertDialog do
+            AlertDialogTrigger do
+              Button { "Show dialog" }
             end
-            render PhlexUI::AlertDialog::Content.new do
-              render PhlexUI::AlertDialog::Header.new do
-                render PhlexUI::AlertDialog::Title.new { "Are you absolutely sure?" }
-                render PhlexUI::AlertDialog::Description.new { "This action cannot be undone. This will permanently delete your account and remove your data from our servers." }
+            AlertDialogContent do
+              AlertDialogHeader do
+                AlertDialogTitle { "Are you absolutely sure?" }
+                AlertDialogDescription { "This action cannot be undone. This will permanently delete your account and remove your data from our servers." }
               end
-              render PhlexUI::AlertDialog::Footer.new do
-                render PhlexUI::AlertDialog::Cancel.new { "Cancel" }
-                render PhlexUI::AlertDialog::Action.new { "Continue" } # Will probably be a link to a controller action (e.g. delete account)
+              AlertDialogFooter do
+                AlertDialogCancel { "Cancel" }
+                AlertDialogAction { "Continue" } # Will probably be a link to a controller action (e.g. delete account)
               end
             end
           end
@@ -35,15 +35,15 @@ def view_template
   def components
     [
       Docs::ComponentStruct.new(name: "AlertDialogController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/alert_dialog_controller.js", built_using: :stimulus),
-      Docs::ComponentStruct.new(name: "PhlexUI::AlertDialog", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::AlertDialog::Trigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/trigger.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::AlertDialog::Content", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/content.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::AlertDialog::Header", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/header.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::AlertDialog::Title", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/title.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::AlertDialog::Description", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/description.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::AlertDialog::Footer", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/footer.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::AlertDialog::Cancel", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/cancel.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::AlertDialog::Action", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/action.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "AlertDialog", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AlertDialogTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/trigger.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AlertDialogContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/content.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AlertDialogHeader", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/header.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AlertDialogTitle", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/title.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AlertDialogDescription", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/description.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AlertDialogFooter", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/footer.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AlertDialogCancel", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/cancel.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AlertDialogAction", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/action.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/docs/alert_view.rb b/app/views/docs/alert_view.rb
index 6aacd14..9469234 100644
--- a/app/views/docs/alert_view.rb
+++ b/app/views/docs/alert_view.rb
@@ -5,53 +5,53 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Alert", description: "Displays a callout for user attention.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Example", context: self) do
         <<~RUBY
-          render PhlexUI::Alert.new do
+          Alert do
             rocket_icon
-            render PhlexUI::Alert::Title.new { "Pro tip" }
-            render PhlexUI::Alert::Description.new { "With PhlexUI you'll ship faster." }
+            AlertTitle { "Pro tip" }
+            AlertDescription { "With PhlexUI you'll ship faster." }
           end
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Without Icon", context: self) do
         <<~RUBY
-          render PhlexUI::Alert.new do
-            render PhlexUI::Alert::Title.new { "Pro tip" }
-            render PhlexUI::Alert::Description.new { "Simply, don't include an icon and your alert will look like this." }
+          Alert do
+            AlertTitle { "Pro tip" }
+            AlertDescription { "Simply, don't include an icon and your alert will look like this." }
           end
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Warning", context: self) do
         <<~RUBY
-          render PhlexUI::Alert.new(variant: :warning) do
+          Alert(variant: :warning) do
             info_icon
-            render PhlexUI::Alert::Title.new { "Ship often" }
-            render PhlexUI::Alert::Description.new { "Shipping is good, your users will thank you for it." }
+            AlertTitle { "Ship often" }
+            AlertDescription { "Shipping is good, your users will thank you for it." }
           end
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Destructive", context: self) do
         <<~RUBY
-          render PhlexUI::Alert.new(variant: :destructive) do
+          Alert(variant: :destructive) do
             alert_icon
-            render PhlexUI::Alert::Title.new { "Oopsie daisy!" }
-            render PhlexUI::Alert::Description.new { "Your design system is non-existent." }
+            AlertTitle { "Oopsie daisy!" }
+            AlertDescription { "Your design system is non-existent." }
           end
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Success", context: self) do
         <<~RUBY
-          render PhlexUI::Alert.new(variant: :success) do
+          Alert(variant: :success) do
             check_icon
-            render PhlexUI::Alert::Title.new { "Installation successful" }
-            render PhlexUI::Alert::Description.new { "You're all set to start using PhlexUI in your application." }
+            AlertTitle { "Installation successful" }
+            AlertDescription { "You're all set to start using PhlexUI in your application." }
           end
         RUBY
       end
@@ -64,9 +64,9 @@ def view_template
 
   def components
     [
-      Docs::ComponentStruct.new(name: "PhlexUI::Alert", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Alert::Title", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert/title.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Alert::Description", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert/description.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Alert", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AlertTitle", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert/title.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AlertDescription", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert/description.rb", built_using: :phlex)
     ]
   end
 
diff --git a/app/views/docs/aspect_ratio_view.rb b/app/views/docs/aspect_ratio_view.rb
index 41aa201..9bf2eb2 100644
--- a/app/views/docs/aspect_ratio_view.rb
+++ b/app/views/docs/aspect_ratio_view.rb
@@ -5,11 +5,11 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Aspect Ratio", description: "Displays content within a desired ratio.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "16/9", context: self) do
         <<~RUBY
-          render PhlexUI::AspectRatio.new(aspect_ratio: "16/9", class: "rounded-md overflow-hidden border shadow-sm") do
+          AspectRatio(aspect_ratio: "16/9", class: "rounded-md overflow-hidden border shadow-sm") do
             img(
               alt: "Placeholder",
               loading: "lazy",
@@ -22,7 +22,7 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "4/3", context: self) do
         <<~RUBY
-          render PhlexUI::AspectRatio.new(aspect_ratio: "4/3", class: "rounded-md overflow-hidden border shadow-sm") do
+          AspectRatio(aspect_ratio: "4/3", class: "rounded-md overflow-hidden border shadow-sm") do
             img(
               alt: "Placeholder",
               loading: "lazy",
@@ -35,7 +35,7 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "1/1", context: self) do
         <<~RUBY
-          render PhlexUI::AspectRatio.new(aspect_ratio: "1/1", class: "rounded-md overflow-hidden border shadow-sm") do
+          AspectRatio(aspect_ratio: "1/1", class: "rounded-md overflow-hidden border shadow-sm") do
             img(
               alt: "Placeholder",
               loading: "lazy",
@@ -48,7 +48,7 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "21/9", context: self) do
         <<~RUBY
-          render PhlexUI::AspectRatio.new(aspect_ratio: "21/9", class: "rounded-md overflow-hidden border shadow-sm") do
+          AspectRatio(aspect_ratio: "21/9", class: "rounded-md overflow-hidden border shadow-sm") do
             img(
               alt: "Placeholder",
               loading: "lazy",
@@ -67,7 +67,7 @@ def view_template
 
   def components
     [
-      Docs::ComponentStruct.new(name: "PhlexUI::AspectRatio", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/aspect_ratio.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "AspectRatio", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/aspect_ratio.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/docs/avatar_view.rb b/app/views/docs/avatar_view.rb
index 5a4ec1a..2ee13ce 100644
--- a/app/views/docs/avatar_view.rb
+++ b/app/views/docs/avatar_view.rb
@@ -5,33 +5,21 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Avatar", description: "An image element with a fallback for representing the user.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
-
-      render Docs::VisualCodeExample.new(title: "Builder with Image", context: self) do
-        <<~RUBY
-          render PhlexUI::Avatar::Builder.new(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper", initials: "JD")
-        RUBY
-      end
-
-      render Docs::VisualCodeExample.new(title: "Builder without Image", context: self) do
-        <<~RUBY
-          render PhlexUI::Avatar::Builder.new(initials: "JD")
-        RUBY
-      end
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Image & fallback", context: self) do
         <<~RUBY
-          render PhlexUI::Avatar.new do
-            render PhlexUI::Avatar::Image.new(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
-            render PhlexUI::Avatar::Fallback.new { "JD" }
+          Avatar do
+            AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
+            AvatarFallback { "JD" }
           end
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Only fallback", context: self) do
         <<~RUBY
-          render PhlexUI::Avatar.new do
-            render PhlexUI::Avatar::Fallback.new { "JD" }
+          Avatar do
+            AvatarFallback { "JD" }
           end
         RUBY
       end
@@ -40,29 +28,29 @@ def view_template
         <<~RUBY
           div(class: 'flex items-center space-x-2') do
             # size: :xs
-            render PhlexUI::Avatar.new(size: :xs) do
-              render PhlexUI::Avatar::Image.new(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
-              render PhlexUI::Avatar::Fallback.new { "JD" }
+            Avatar(size: :xs) do
+              AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
+              AvatarFallback { "JD" }
             end
             # size: :sm
-            render PhlexUI::Avatar.new(size: :sm) do
-              render PhlexUI::Avatar::Image.new(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
-              render PhlexUI::Avatar::Fallback.new { "JD" }
+            Avatar(size: :sm) do
+              AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
+              AvatarFallback { "JD" }
             end
             # size: :md
-            render PhlexUI::Avatar.new(size: :md) do
-              render PhlexUI::Avatar::Image.new(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
-              render PhlexUI::Avatar::Fallback.new { "JD" }
+            Avatar(size: :md) do
+              AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
+              AvatarFallback { "JD" }
             end
             # size: :lg
-            render PhlexUI::Avatar.new(size: :lg) do
-              render PhlexUI::Avatar::Image.new(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
-              render PhlexUI::Avatar::Fallback.new { "JD" }
+            Avatar(size: :lg) do
+              AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
+              AvatarFallback { "JD" }
             end
             # size: :xl
-            render PhlexUI::Avatar.new(size: :xl) do
-              render PhlexUI::Avatar::Image.new(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
-              render PhlexUI::Avatar::Fallback.new { "JD" }
+            Avatar(size: :xl) do
+              AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
+              AvatarFallback { "JD" }
             end
           end
         RUBY
@@ -72,24 +60,24 @@ def view_template
         <<~RUBY
           div(class: 'flex items-center space-x-2') do
             # size: :xs
-            render PhlexUI::Avatar.new(size: :xs) do
-              render PhlexUI::Avatar::Fallback.new { "JD" }
+            Avatar(size: :xs) do
+              AvatarFallback { "JD" }
             end
             # size: :sm
-            render PhlexUI::Avatar.new(size: :sm) do
-              render PhlexUI::Avatar::Fallback.new { "JD" }
+            Avatar(size: :sm) do
+              AvatarFallback { "JD" }
             end
             # size: :md
-            render PhlexUI::Avatar.new(size: :md) do
-              render PhlexUI::Avatar::Fallback.new { "JD" }
+            Avatar(size: :md) do
+              AvatarFallback { "JD" }
             end
             # size: :lg
-            render PhlexUI::Avatar.new(size: :lg) do
-              render PhlexUI::Avatar::Fallback.new { "JD" }
+            Avatar(size: :lg) do
+              AvatarFallback { "JD" }
             end
             # size: :xl
-            render PhlexUI::Avatar.new(size: :xl) do
-              render PhlexUI::Avatar::Fallback.new { "JD" }
+            Avatar(size: :xl) do
+              AvatarFallback { "JD" }
             end
           end
         RUBY
@@ -103,10 +91,9 @@ def view_template
 
   def components
     [
-      Docs::ComponentStruct.new(name: "PhlexUI::Avatar::Builder", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/avatar/builder.rb", builder: true, built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Avatar", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/avatar.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Avatar::Image", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/avatar/image.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Avatar::Fallback", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/avatar/fallback.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Avatar", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/avatar.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AvatarImage", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/avatar/image.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AvatarFallback", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/avatar/fallback.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/docs/badge_view.rb b/app/views/docs/badge_view.rb
index b78e275..9af392f 100644
--- a/app/views/docs/badge_view.rb
+++ b/app/views/docs/badge_view.rb
@@ -5,32 +5,32 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Badge", description: "Displays a badge or a component that looks like a badge.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Default", context: self) do
         <<~RUBY
-          render PhlexUI::Badge.new { "Badge" }
+          Badge { "Badge" }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Primary", context: self) do
         <<~RUBY
-          render PhlexUI::Badge.new(variant: :primary) { 'Primary' }
+          Badge(variant: :primary) { 'Primary' }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Outline", context: self) do
         <<~RUBY
-          render PhlexUI::Badge.new(variant: :outline) { 'Outline' }
+          Badge(variant: :outline) { 'Outline' }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Variants", context: self) do
         <<~RUBY
           div(class: 'flex flex-wrap gap-2 justify-center') do
-            render PhlexUI::Badge.new(variant: :destructive) { 'Destructive' }
-            render PhlexUI::Badge.new(variant: :warning) { 'Warning' }
-            render PhlexUI::Badge.new(variant: :success) { 'Success' }
+            Badge(variant: :destructive) { 'Destructive' }
+            Badge(variant: :warning) { 'Warning' }
+            Badge(variant: :success) { 'Success' }
           end
         RUBY
       end
@@ -38,23 +38,23 @@ def view_template
       render Docs::VisualCodeExample.new(title: "Other Colors", context: self) do
         <<~RUBY
           div(class: 'flex flex-wrap gap-2 justify-center') do
-            render PhlexUI::Badge.new(variant: :red) { 'Red' }
-            render PhlexUI::Badge.new(variant: :orange) { 'Orange' }
-            render PhlexUI::Badge.new(variant: :amber) { 'Amber' }
-            render PhlexUI::Badge.new(variant: :yellow) { 'Yellow' }
-            render PhlexUI::Badge.new(variant: :lime) { 'Lime' }
-            render PhlexUI::Badge.new(variant: :green) { 'Green' }
-            render PhlexUI::Badge.new(variant: :emerald) { 'Emerald' }
-            render PhlexUI::Badge.new(variant: :teal) { 'Teal' }
-            render PhlexUI::Badge.new(variant: :cyan) { 'Cyan' }
-            render PhlexUI::Badge.new(variant: :sky) { 'Sky' }
-            render PhlexUI::Badge.new(variant: :blue) { 'Blue' }
-            render PhlexUI::Badge.new(variant: :indigo) { 'Indigo' }
-            render PhlexUI::Badge.new(variant: :violet) { 'Violet' }
-            render PhlexUI::Badge.new(variant: :purple) { 'Purple' }
-            render PhlexUI::Badge.new(variant: :fuchsia) { 'Fuchsia' }
-            render PhlexUI::Badge.new(variant: :pink) { 'Pink' }
-            render PhlexUI::Badge.new(variant: :rose) { 'Rose' }
+            Badge(variant: :red) { 'Red' }
+            Badge(variant: :orange) { 'Orange' }
+            Badge(variant: :amber) { 'Amber' }
+            Badge(variant: :yellow) { 'Yellow' }
+            Badge(variant: :lime) { 'Lime' }
+            Badge(variant: :green) { 'Green' }
+            Badge(variant: :emerald) { 'Emerald' }
+            Badge(variant: :teal) { 'Teal' }
+            Badge(variant: :cyan) { 'Cyan' }
+            Badge(variant: :sky) { 'Sky' }
+            Badge(variant: :blue) { 'Blue' }
+            Badge(variant: :indigo) { 'Indigo' }
+            Badge(variant: :violet) { 'Violet' }
+            Badge(variant: :purple) { 'Purple' }
+            Badge(variant: :fuchsia) { 'Fuchsia' }
+            Badge(variant: :pink) { 'Pink' }
+            Badge(variant: :rose) { 'Rose' }
           end
         RUBY
       end
@@ -62,9 +62,9 @@ def view_template
       render Docs::VisualCodeExample.new(title: "Sizes", context: self) do
         <<~RUBY
           div(class: 'flex flex-wrap gap-2 justify-center items-center') do
-            render PhlexUI::Badge.new(size: :sm) { "Small" }
-            render PhlexUI::Badge.new(size: :md) { "Medium" }
-            render PhlexUI::Badge.new(size: :lg) { "Large" }
+            Badge(size: :sm) { "Small" }
+            Badge(size: :md) { "Medium" }
+            Badge(size: :lg) { "Large" }
           end
         RUBY
       end
@@ -78,7 +78,7 @@ def view_template
 
   def components
     [
-      Docs::ComponentStruct.new(name: "PhlexUI::Badge", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/badge.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Badge", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/badge.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/docs/button_view.rb b/app/views/docs/button_view.rb
index 9dafd79..1efeccf 100644
--- a/app/views/docs/button_view.rb
+++ b/app/views/docs/button_view.rb
@@ -5,53 +5,53 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Button", description: "Displays a button or a component that looks like a button.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Example", context: self) do
         <<~RUBY
-          render PhlexUI::Button.new { "Button" }
+          Button { "Button" }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Primary", context: self) do
         <<~RUBY
-          render PhlexUI::Button.new(variant: :primary) { "Primary" }
+          Button(variant: :primary) { "Primary" }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Secondary", context: self) do
         <<~RUBY
-          render PhlexUI::Button.new(variant: :secondary) { "Secondary" }
+          Button(variant: :secondary) { "Secondary" }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Destructive", context: self) do
         <<~RUBY
-          render PhlexUI::Button.new(variant: :destructive) { "Destructive" }
+          Button(variant: :destructive) { "Destructive" }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Outline", context: self) do
         <<~RUBY
-          render PhlexUI::Button.new(variant: :outline) { "Outline" }
+          Button(variant: :outline) { "Outline" }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Ghost", context: self) do
         <<~RUBY
-          render PhlexUI::Button.new(variant: :ghost) { "Ghost" }
+          Button(variant: :ghost) { "Ghost" }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Link", context: self) do
         <<~RUBY
-          render PhlexUI::Button.new(variant: :link) { "Link" }
+          Button(variant: :link) { "Link" }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Icon", context: self) do
         <<~RUBY
-          render PhlexUI::Button.new(variant: :outline, icon: true) do 
+          Button(variant: :outline, icon: true) do 
             svg(
               xmlns: "http://www.w3.org/2000/svg",
               viewbox: "0 0 20 20",
@@ -71,7 +71,7 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "With Icon", context: self) do
         <<~RUBY
-          render PhlexUI::Button.new(variant: :primary) do 
+          Button(variant: :primary) do 
             svg(
               xmlns: "http://www.w3.org/2000/svg",
               fill: "none",
@@ -94,7 +94,7 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "With Icon", context: self) do
         <<~RUBY
-          render PhlexUI::Button.new(variant: :primary, disabled: true) do 
+          Button(variant: :primary, disabled: true) do 
             svg(
               xmlns: "http://www.w3.org/2000/svg",
               viewbox: "0 0 20 20",
@@ -115,7 +115,7 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "Submit", context: self) do
         <<~RUBY
-          render PhlexUI::Button.new(variant: :primary, type: :submit) do 
+          Button(variant: :primary, type: :submit) do 
             span { "Submit application" }
           end
         RUBY
@@ -129,7 +129,7 @@ def view_template
 
   def components
     [
-      Docs::ComponentStruct.new(name: "PhlexUI::Button", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/button.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Button", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/button.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/docs/calendar_view.rb b/app/views/docs/calendar_view.rb
index 9460354..aba14d6 100644
--- a/app/views/docs/calendar_view.rb
+++ b/app/views/docs/calendar_view.rb
@@ -9,13 +9,13 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Calendar", description: "A date field component that allows users to enter and edit date.", premium: @premium)
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2.new { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Connect to input", context: self, premium: @premium) do
         <<~RUBY
           div(class: 'space-y-4') do
-            render PhlexUI::Input.new(type: 'string', placeholder: "Select a date", class: 'rounded-md border shadow', id: 'date', data_controller: 'input')
-            render PhlexUI::Calendar.new(input_id: '#date', class: 'rounded-md border shadow')
+            Input(type: 'string', placeholder: "Select a date", class: 'rounded-md border shadow', id: 'date', data_controller: 'input')
+            Calendar(input_id: '#date', class: 'rounded-md border shadow')
           end
         RUBY
       end
@@ -23,8 +23,8 @@ def view_template
       render Docs::VisualCodeExample.new(title: "Format date", description: "Format dates with date-fns", context: self, premium: @premium) do
         <<~RUBY
           div(class: 'space-y-4') do
-            render PhlexUI::Input.new(type: 'string', placeholder: "Select a date", class: 'rounded-md border shadow', id: 'formatted-date', data_controller: 'input')
-            render PhlexUI::Calendar.new(input_id: '#formatted-date', date_format: 'PPPP', class: 'rounded-md border shadow')
+            Input(type: 'string', placeholder: "Select a date", class: 'rounded-md border shadow', id: 'formatted-date', data_controller: 'input')
+            Calendar(input_id: '#formatted-date', date_format: 'PPPP', class: 'rounded-md border shadow')
           end
         RUBY
       end
@@ -38,14 +38,14 @@ def view_template
   def components
     [
       Docs::ComponentStruct.new(name: "CalendarController", source: "https://github.com/PhlexUI/phlex_ui_stimulus_pro/blob/main/controllers/calendar_controller.js", built_using: :stimulus),
-      Docs::ComponentStruct.new(name: "PhlexUI::Calendar", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Calendar::Body", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/body.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Calendar::Days", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/days.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Calendar::Header", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/header.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Calendar::Next", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/next.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Calendar::Prev", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/prev.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Calendar::Title", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/title.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Calendar::Weekdays", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/weekdays.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Calendar", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CalendarBody", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/body.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CalendarDays", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/days.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CalendarHeader", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/header.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CalendarNext", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/next.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CalendarPrev", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/prev.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CalendarTitle", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/title.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CalendarWeekdays", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/weekdays.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/docs/card_view.rb b/app/views/docs/card_view.rb
index e1622f5..3992192 100644
--- a/app/views/docs/card_view.rb
+++ b/app/views/docs/card_view.rb
@@ -5,17 +5,17 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Card", description: "Displays a card with header, content, and footer.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Card with image", context: self) do
         <<~RUBY
-          render PhlexUI::Card.new(class: 'w-96') do
-            render PhlexUI::Card::Header.new do
-              render PhlexUI::Card::Title.new { 'You might like "PhlexUI"' }
-              render PhlexUI::Card::Description.new { "@joeldrapper" }
+          Card(class: 'w-96') do
+            CardHeader do
+              CardTitle { 'You might like "PhlexUI"' }
+              CardDescription { "@joeldrapper" }
             end
-            render PhlexUI::Card::Content.new do
-              render PhlexUI::AspectRatio.new(aspect_ratio: "16/9", class: "rounded-md overflow-hidden border") do
+            CardContent do
+              AspectRatio(aspect_ratio: "16/9", class: "rounded-md overflow-hidden border") do
                 img(
                   alt: "Placeholder",
                   loading: "lazy",
@@ -24,9 +24,9 @@ def view_template
                 )
               end
             end
-            render PhlexUI::Card::Footer.new(class: 'flex justify-end gap-x-2') do
-              render PhlexUI::Button.new(variant: :outline) { "See more" }
-              render PhlexUI::Button.new(variant: :primary) { "Buy now" }
+            CardFooter(class: 'flex justify-end gap-x-2') do
+              Button(variant: :outline) { "See more" }
+              Button(variant: :primary) { "Buy now" }
             end
           end
         RUBY
@@ -34,8 +34,8 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "Card with full-width image", context: self) do
         <<~RUBY
-          render PhlexUI::Card.new(class: 'w-96 overflow-hidden') do
-            render PhlexUI::AspectRatio.new(aspect_ratio: "16/9", class: "border-b") do
+          Card(class: 'w-96 overflow-hidden') do
+            AspectRatio(aspect_ratio: "16/9", class: "border-b") do
               img(
                 alt: "Placeholder",
                 loading: "lazy",
@@ -43,12 +43,12 @@ def view_template
                   helpers.image_url('pattern.jpg')
               )
             end
-            render PhlexUI::Card::Header.new do
-              render PhlexUI::Card::Title.new { 'Introducing PhlexUI' }
-              render PhlexUI::Card::Description.new { "Kickstart your project today!" }
+            CardHeader do
+              CardTitle { 'Introducing PhlexUI' }
+              CardDescription { "Kickstart your project today!" }
             end
-            render PhlexUI::Card::Footer.new(class: 'flex justify-end') do
-              render PhlexUI::Button.new(variant: :outline) { "Get started" }
+            CardFooter(class: 'flex justify-end') do
+              Button(variant: :outline) { "Get started" }
             end
           end
         RUBY
@@ -56,18 +56,18 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "Account balance", context: self) do
         <<~RUBY
-          render PhlexUI::Card.new(class: 'w-96 overflow-hidden') do
-            render PhlexUI::Card::Header.new do
+          Card(class: 'w-96 overflow-hidden') do
+            CardHeader do
               div(class: 'w-10 h-10 rounded-xl flex items-center justify-center bg-violet-100 text-violet-700 -rotate-6') do
                 cash_icon
               end
             end
-            render PhlexUI::Card::Content.new(class: 'space-y-1') do
-              render PhlexUI::Card::Description.new(class: 'font-medium') { "Current Balance" }
+            CardContent(class: 'space-y-1') do
+              CardDescription(class: 'font-medium') { "Current Balance" }
               h5(class: 'font-semibold text-4xl') { '$2,602' }
             end
-            render PhlexUI::Card::Footer.new do
-              render PhlexUI::Typography::Muted.new { "**** 4620" }
+            CardFooter do
+              TypographyMuted { "**** 4620" }
             end
           end
         RUBY
@@ -81,12 +81,12 @@ def view_template
 
   def components
     [
-      Docs::ComponentStruct.new(name: "PhlexUI::Card", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/card.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Card::Header", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/card/header.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Card::Content", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/card/content.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Card::Footer", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/card/footer.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Card::Title", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/card/title.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Card::Description", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/card/description.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Card", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/card.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CardHeader", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/card/header.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CardContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/card/content.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CardFooter", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/card/footer.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CardTitle", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/card/title.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CardDescription", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/card/description.rb", built_using: :phlex)
     ]
   end
 
diff --git a/app/views/docs/chart_view.rb b/app/views/docs/chart_view.rb
index e915ffa..0edcb7f 100644
--- a/app/views/docs/chart_view.rb
+++ b/app/views/docs/chart_view.rb
@@ -5,17 +5,17 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Chart", description: "Displays information in a visual way.")
 
-      render PhlexUI::Typography::H2.new { "Introduction" }
+      TypographyH2 { "Introduction" }
 
-      render PhlexUI::Typography::P.new do
+      TypographyP do
         plain "PhlexUI uses "
-        render PhlexUI::Typography::InlineLink.new(href: "https://www.chartjs.org/") { "Chart.js" }
+        TypographyInlineLink(href: "https://www.chartjs.org/") { "Chart.js" }
         plain " to render charts. Chart.js is a free open-source JavaScript library for data visualization, which supports 8 chart types: bar, line, area, pie, bubble, radar, polar, and scatter. If you're unfamiliar with Chart.js. We recommend the "
-        render PhlexUI::Typography::InlineLink.new(href: "https://www.chartjs.org/docs/latest/getting-started/") { "Getting Started guide" }
+        TypographyInlineLink(href: "https://www.chartjs.org/docs/latest/getting-started/") { "Getting Started guide" }
         plain ". "
       end
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Bar Chart", context: self) do
         <<~RUBY
@@ -38,7 +38,7 @@ def view_template
             },
           }
 
-          render PhlexUI::Chart.new(options: options)
+          PhlexUIChart(options: options)
         RUBY
       end
 
@@ -67,7 +67,7 @@ def view_template
             },
           }
 
-          render PhlexUI::Chart.new(options: options)
+          PhlexUIChart(options: options)
         RUBY
       end
 
@@ -94,7 +94,7 @@ def view_template
             },
           }
 
-          render PhlexUI::Chart.new(options: options)
+          PhlexUIChart(options: options)
         RUBY
       end
 
@@ -107,7 +107,7 @@ 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: "PhlexUI::Chart", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/chart.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Chart", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/chart.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/docs/checkbox_view.rb b/app/views/docs/checkbox_view.rb
index bd40a9c..9b0fba9 100644
--- a/app/views/docs/checkbox_view.rb
+++ b/app/views/docs/checkbox_view.rb
@@ -5,12 +5,12 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Checkbox", description: "A control that allows the user to toggle between checked and not checked.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Example", context: self) do
         <<~RUBY
           div(class: 'flex items-center space-x-3') do
-            render PhlexUI::Checkbox.new(id: 'terms')
+            Checkbox(id: 'terms')
             label(for: 'terms', class: 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70') { "Accept terms and conditions" }
           end
         RUBY
@@ -19,7 +19,7 @@ def view_template
       render Docs::VisualCodeExample.new(title: "Checked", context: self) do
         <<~RUBY
           div(class: "items-top flex space-x-3") do
-            render PhlexUI::Checkbox.new(id: 'terms1', checked: true)
+            Checkbox(id: 'terms1', checked: true)
             div(class: "grid gap-1.5 leading-none") do
               label(
                 for: "terms1",
@@ -40,7 +40,7 @@ def view_template
 
   def components
     [
-      Docs::ComponentStruct.new(name: "PhlexUI::Checkbox", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/checkbox.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Checkbox", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/checkbox.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/docs/collapsible_view.rb b/app/views/docs/collapsible_view.rb
index c8b94e8..6ca7b37 100644
--- a/app/views/docs/collapsible_view.rb
+++ b/app/views/docs/collapsible_view.rb
@@ -5,15 +5,15 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Collapsible", description: "An interactive component which expands/collapses a panel.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Example", context: self) do
         <<~RUBY
-          render PhlexUI::Collapsible.new do
+          Collapsible do
             div(class: "flex items-center justify-between space-x-4 px-4 py-2") do
               h4(class: "text-sm font-semibold") { " @joeldrapper starred 3 repositories" }
-              render PhlexUI::Collapsible::Trigger.new do
-                render PhlexUI::Button.new(variant: :ghost, icon: true) do
+              CollapsibleTrigger do
+                Button(variant: :ghost, icon: true) do
                   chevron_icon
                   span(class: "sr-only") { "Toggle" }
                 end
@@ -24,7 +24,7 @@ def view_template
               "phlex-ruby/phlex"
             end
 
-            render PhlexUI::Collapsible::Content.new do
+            CollapsibleContent do
               div(class: 'space-y-2 mt-2') do
                 div(class: "rounded-md border px-4 py-2 font-mono text-sm shadow-sm") do
                   "phlex-ruby/phlex-rails"
@@ -40,11 +40,11 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "Open", context: self) do
         <<~RUBY
-          render PhlexUI::Collapsible.new(open: true) do
+          Collapsible(open: true) do
             div(class: "flex items-center justify-between space-x-4 px-4 py-2") do
               h4(class: "text-sm font-semibold") { " @joeldrapper starred 3 repositories" }
-              render PhlexUI::Collapsible::Trigger.new do
-                render PhlexUI::Button.new(variant: :ghost, icon: true) do
+              CollapsibleTrigger do
+                Button(variant: :ghost, icon: true) do
                   chevron_icon
                   span(class: "sr-only") { "Toggle" }
                 end
@@ -55,7 +55,7 @@ def view_template
               "phlex-ruby/phlex"
             end
 
-            render PhlexUI::Collapsible::Content.new do
+            CollapsibleContent do
               div(class: 'space-y-2 mt-2') do
                 div(class: "rounded-md border px-4 py-2 font-mono text-sm shadow-sm") do
                   "phlex-ruby/phlex-rails"
@@ -78,9 +78,9 @@ def view_template
   def components
     [
       Docs::ComponentStruct.new(name: "CollapsibleController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/collapsible_controller.js", built_using: :stimulus),
-      Docs::ComponentStruct.new(name: "PhlexUI::Collapsible", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/collapsible.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Collapsible::Trigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/collapsible/trigger.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Collapsible::Content", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/collapsible/content.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Collapsible", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/collapsible.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CollapsibleTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/collapsible/trigger.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CollapsibleContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/collapsible/content.rb", built_using: :phlex)
     ]
   end
 
diff --git a/app/views/docs/command_view.rb b/app/views/docs/command_view.rb
index 1ce70f0..6e49b33 100644
--- a/app/views/docs/command_view.rb
+++ b/app/views/docs/command_view.rb
@@ -9,41 +9,41 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Command", description: "Fast, composable, unstyled command menu for Phlex.", premium: @premium)
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Example", context: self, premium: @premium) do
         <<~RUBY
-          render PhlexUI::Command::Dialog.new do
-            render PhlexUI::Command::DialogTrigger.new do
-              render PhlexUI::Button.new(variant: "outline", class: 'w-56 pr-2 pl-3 justify-between') do
+          CommandDialog do
+            CommandDialogTrigger do
+              Button(variant: "outline", class: 'w-56 pr-2 pl-3 justify-between') do
                 div(class: "flex items-center space-x-1") do
                   search_icon
                   span(class: "text-muted-foreground font-normal") do
                     plain "Search"
                   end
                 end
-                render PhlexUI::ShortcutKey.new do
+                ShortcutKey do
                   span(class: "text-xs") { "⌘" }
                   plain "K"
                 end
               end
             end
-            render PhlexUI::Command::DialogContent.new do
-              render PhlexUI::Command.new do
-                render PhlexUI::Command::Input.new(placeholder: "Type a command or search...")
-                render PhlexUI::Command::Empty.new { "No results found." }
-                render PhlexUI::Command::List.new do
-                  render PhlexUI::Command::Group.new(title: "Components") do
+            CommandDialogContent do
+              Command do
+                CommandInput(placeholder: "Type a command or search...")
+                CommandEmpty { "No results found." }
+                CommandList do
+                  CommandGroup(title: "Components") do
                     components_list.each do |component|
-                      render PhlexUI::Command::Item.new(value: component[:name], href: component[:path]) do
+                      CommandItem(value: component[:name], href: component[:path]) do
                         default_icon
                         plain component[:name]
                       end
                     end
                   end
-                  render PhlexUI::Command::Group.new(title: "Settings") do
+                  CommandGroup(title: "Settings") do
                     settings_list.each do |setting|
-                      render PhlexUI::Command::Item.new(value: setting[:name], href: setting[:path]) do
+                      CommandItem(value: setting[:name], href: setting[:path]) do
                         default_icon
                         plain setting[:name]
                       end
@@ -58,32 +58,32 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "With keybinding", context: self, premium: @premium) do
         <<~RUBY
-          render PhlexUI::Command::Dialog.new do
-            render PhlexUI::Command::DialogTrigger.new(keybindings: ['keydown.ctrl+j@window', 'keydown.meta+j@window']) do
+          CommandDialog do
+            CommandDialogTrigger(keybindings: ['keydown.ctrl+j@window', 'keydown.meta+j@window']) do
               p(class: "text-sm text-muted-foreground") do
                 span(class: 'mr-1') { "Press" }
-                render PhlexUI::ShortcutKey.new do
+                ShortcutKey do
                   span(class: "text-xs") { "⌘" }
                   plain "J"
                 end
               end
             end
-            render PhlexUI::Command::DialogContent.new do
-              render PhlexUI::Command.new do
-                render PhlexUI::Command::Input.new(placeholder: "Type a command or search...")
-                render PhlexUI::Command::Empty.new { "No results found." }
-                render PhlexUI::Command::List.new do
-                  render PhlexUI::Command::Group.new(title: "Components") do
+            CommandDialogContent do
+              Command do
+                CommandInput(placeholder: "Type a command or search...")
+                CommandEmpty { "No results found." }
+                CommandList do
+                  CommandGroup(title: "Components") do
                     components_list.each do |component|
-                      render PhlexUI::Command::Item.new(value: component[:name], href: component[:path]) do
+                      CommandItem(value: component[:name], href: component[:path]) do
                         default_icon
                         plain component[:name]
                       end
                     end
                   end
-                  render PhlexUI::Command::Group.new(title: "Settings") do
+                  CommandGroup(title: "Settings") do
                     settings_list.each do |setting|
-                      render PhlexUI::Command::Item.new(value: setting[:name], href: setting[:path]) do
+                      CommandItem(value: setting[:name], href: setting[:path]) do
                         default_icon
                         plain setting[:name]
                       end
@@ -105,15 +105,15 @@ 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: "PhlexUI::Command::Dialog", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/dialog.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Command::DialogTrigger", 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: "PhlexUI::Command::DialogContent", 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: "PhlexUI::Command", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Command::Input", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/input.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Command::Empty", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/empty.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Command::List", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/list.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Command::Group", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/group.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Command::Item", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/item.rb", built_using: :phlex)
+      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)
     ]
   end
 
diff --git a/app/views/docs/context_menu_view.rb b/app/views/docs/context_menu_view.rb
index 6030d4c..e3f66d9 100644
--- a/app/views/docs/context_menu_view.rb
+++ b/app/views/docs/context_menu_view.rb
@@ -5,25 +5,25 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Context Menu", description: "Displays a menu to the user — such as a set of actions or functions — triggered by a right click.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Example", context: self) do
         <<~RUBY
-          render PhlexUI::ContextMenu.new do
-            render PhlexUI::ContextMenu::Trigger.new(class: 'flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm') { "Right click here" }
-            render PhlexUI::ContextMenu::Content.new(class: 'w-64') do
-              render PhlexUI::ContextMenu::Item.new(href: '#', shortcut: "⌘[") { "Back" }
-              render PhlexUI::ContextMenu::Item.new(href: '#', shortcut: "⌘]", disabled: true) { "Forward" }
-              render PhlexUI::ContextMenu::Item.new(href: '#', shortcut: "⌘R") { "Reload" }
-              render PhlexUI::ContextMenu::Separator.new
-              render PhlexUI::ContextMenu::Item.new(href: '#', shortcut: "⌘⇧B", checked: true) { "Show Bookmarks Bar" }
-              render PhlexUI::ContextMenu::Item.new(href: '#') { "Show Full URLs" }
-              render PhlexUI::ContextMenu::Separator.new
-              render PhlexUI::ContextMenu::Label.new(inset: true) { "More Tools" }
-              render PhlexUI::ContextMenu::Separator.new
-              render PhlexUI::ContextMenu::Item.new(href: '#') { "Developer Tools" }
-              render PhlexUI::ContextMenu::Item.new(href: '#') { "Task Manager" }
-              render PhlexUI::ContextMenu::Item.new(href: '#') { "Extensions" }
+          ContextMenu do
+            ContextMenuTrigger(class: 'flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm') { "Right click here" }
+            ContextMenuContent(class: 'w-64') do
+              ContextMenuItem(href: '#', shortcut: "⌘[") { "Back" }
+              ContextMenuItem(href: '#', shortcut: "⌘]", disabled: true) { "Forward" }
+              ContextMenuItem(href: '#', shortcut: "⌘R") { "Reload" }
+              ContextMenuSeparator
+              ContextMenuItem(href: '#', shortcut: "⌘⇧B", checked: true) { "Show Bookmarks Bar" }
+              ContextMenuItem(href: '#') { "Show Full URLs" }
+              ContextMenuSeparator
+              ContextMenuLabel(inset: true) { "More Tools" }
+              ContextMenuSeparator
+              ContextMenuItem(href: '#') { "Developer Tools" }
+              ContextMenuItem(href: '#') { "Task Manager" }
+              ContextMenuItem(href: '#') { "Extensions" }
             end
           end
         RUBY
@@ -32,44 +32,44 @@ def view_template
       render Docs::VisualCodeExample.new(title: "Placement", context: self) do
         <<~RUBY
           div(class: 'space-y-4') do
-            render PhlexUI::ContextMenu.new(options: { placement: 'right' }) do
-              render PhlexUI::ContextMenu::Trigger.new(class: 'flex flex-col items-center gap-y-2 h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm') do
+            ContextMenu(options: { placement: 'right' }) do
+              ContextMenuTrigger(class: 'flex flex-col items-center gap-y-2 h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm') do
                 plain "Right click here"
-                render PhlexUI::Badge.new(variant: :primary) { "right" }
+                Badge(variant: :primary) { "right" }
               end
-              render PhlexUI::ContextMenu::Content.new(class: 'w-64') do
-                render PhlexUI::ContextMenu::Item.new(href: '#', shortcut: "⌘[") { "Back" }
-                render PhlexUI::ContextMenu::Item.new(href: '#', shortcut: "⌘]", disabled: true) { "Forward" }
-                render PhlexUI::ContextMenu::Item.new(href: '#', shortcut: "⌘R") { "Reload" }
-                render PhlexUI::ContextMenu::Separator.new
-                render PhlexUI::ContextMenu::Item.new(href: '#', shortcut: "⌘⇧B", checked: true) { "Show Bookmarks Bar" }
-                render PhlexUI::ContextMenu::Item.new(href: '#') { "Show Full URLs" }
-                render PhlexUI::ContextMenu::Separator.new
-                render PhlexUI::ContextMenu::Label.new(inset: true) { "More Tools" }
-                render PhlexUI::ContextMenu::Separator.new
-                render PhlexUI::ContextMenu::Item.new(href: '#') { "Developer Tools" }
-                render PhlexUI::ContextMenu::Item.new(href: '#') { "Task Manager" }
-                render PhlexUI::ContextMenu::Item.new(href: '#') { "Extensions" }
+              ContextMenuContent(class: 'w-64') do
+                ContextMenuItem(href: '#', shortcut: "⌘[") { "Back" }
+                ContextMenuItem(href: '#', shortcut: "⌘]", disabled: true) { "Forward" }
+                ContextMenuItem(href: '#', shortcut: "⌘R") { "Reload" }
+                ContextMenuSeparator
+                ContextMenuItem(href: '#', shortcut: "⌘⇧B", checked: true) { "Show Bookmarks Bar" }
+                ContextMenuItem(href: '#') { "Show Full URLs" }
+                ContextMenuSeparator
+                ContextMenuLabel(inset: true) { "More Tools" }
+                ContextMenuSeparator
+                ContextMenuItem(href: '#') { "Developer Tools" }
+                ContextMenuItem(href: '#') { "Task Manager" }
+                ContextMenuItem(href: '#') { "Extensions" }
               end
             end
-            render PhlexUI::ContextMenu.new(options: { placement: 'left' }) do
-              render PhlexUI::ContextMenu::Trigger.new(class: 'flex flex-col items-center gap-y-2 h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm') do
+            ContextMenu(options: { placement: 'left' }) do
+              ContextMenuTrigger(class: 'flex flex-col items-center gap-y-2 h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm') do
                 plain "Right click here"
-                render PhlexUI::Badge.new(variant: :primary) { "left" }
+                Badge(variant: :primary) { "left" }
               end
-              render PhlexUI::ContextMenu::Content.new(class: 'w-64') do
-                render PhlexUI::ContextMenu::Item.new(href: '#', shortcut: "⌘[") { "Back" }
-                render PhlexUI::ContextMenu::Item.new(href: '#', shortcut: "⌘]", disabled: true) { "Forward" }
-                render PhlexUI::ContextMenu::Item.new(href: '#', shortcut: "⌘R") { "Reload" }
-                render PhlexUI::ContextMenu::Separator.new
-                render PhlexUI::ContextMenu::Item.new(href: '#', shortcut: "⌘⇧B", checked: true) { "Show Bookmarks Bar" }
-                render PhlexUI::ContextMenu::Item.new(href: '#') { "Show Full URLs" }
-                render PhlexUI::ContextMenu::Separator.new
-                render PhlexUI::ContextMenu::Label.new(inset: true) { "More Tools" }
-                render PhlexUI::ContextMenu::Separator.new
-                render PhlexUI::ContextMenu::Item.new(href: '#') { "Developer Tools" }
-                render PhlexUI::ContextMenu::Item.new(href: '#') { "Task Manager" }
-                render PhlexUI::ContextMenu::Item.new(href: '#') { "Extensions" }
+              ContextMenuContent(class: 'w-64') do
+                ContextMenuItem(href: '#', shortcut: "⌘[") { "Back" }
+                ContextMenuItem(href: '#', shortcut: "⌘]", disabled: true) { "Forward" }
+                ContextMenuItem(href: '#', shortcut: "⌘R") { "Reload" }
+                ContextMenuSeparator
+                ContextMenuItem(href: '#', shortcut: "⌘⇧B", checked: true) { "Show Bookmarks Bar" }
+                ContextMenuItem(href: '#') { "Show Full URLs" }
+                ContextMenuSeparator
+                ContextMenuLabel(inset: true) { "More Tools" }
+                ContextMenuSeparator
+                ContextMenuItem(href: '#') { "Developer Tools" }
+                ContextMenuItem(href: '#') { "Task Manager" }
+                ContextMenuItem(href: '#') { "Extensions" }
               end
             end
           end
@@ -85,12 +85,12 @@ 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: "PhlexUI::ContextMenu", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/context_menu.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::ContextMenu::Trigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/context_menu/trigger.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::ContextMenu::Content", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/context_menu/content.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::ContextMenu::Item", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/context_menu/item.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::ContextMenu::Separator", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/context_menu/separator.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::ContextMenu::Label", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/context_menu/label.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "ContextMenu", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/context_menu.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "ContextMenuTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/context_menu/trigger.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "ContextMenuContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/context_menu/content.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "ContextMenuItem", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/context_menu/item.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "ContextMenuSeparator", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/context_menu/separator.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "ContextMenuLabel", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/context_menu/label.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/docs/date_picker_view.rb b/app/views/docs/date_picker_view.rb
index 215970f..1f1effe 100644
--- a/app/views/docs/date_picker_view.rb
+++ b/app/views/docs/date_picker_view.rb
@@ -9,20 +9,20 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Date Picker", description: "A date picker component with input.", premium: @premium)
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Single Date", context: self, premium: @premium) do
         <<~RUBY
           div(class: 'space-y-4 w-[260px]') do
-            render PhlexUI::Popover.new(options: { trigger: 'focusin' }) do
-              render PhlexUI::Popover::Trigger.new(class: 'w-full') do
+            Popover(options: { trigger: 'focusin' }) do
+              PopoverTrigger(class: 'w-full') do
                 div(class: 'grid w-full max-w-sm items-center gap-1.5') do
-                  render PhlexUI::Label.new(for: "date") { "Select a date" }
-                  render PhlexUI::Input.new(type: 'string', placeholder: "Select a date", class: 'rounded-md border shadow', id: 'date', data_controller: 'input')
+                  Label(for: "date") { "Select a date" }
+                  Input(type: 'string', placeholder: "Select a date", class: 'rounded-md border shadow', id: 'date', data_controller: 'input')
                 end
               end
-              render PhlexUI::Popover::Content.new do
-                render PhlexUI::Calendar.new(input_id: '#date')
+              PopoverContent do
+                Calendar(input_id: '#date')
               end
             end
           end
@@ -39,17 +39,17 @@ def components
     [
       Docs::ComponentStruct.new(name: "CalendarController", source: "https://github.com/PhlexUI/phlex_ui_stimulus_pro/blob/main/controllers/calendar_controller.js", built_using: :stimulus),
       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: "PhlexUI::Calendar", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Calendar::Body", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/body.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Calendar::Days", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/days.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Calendar::Header", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/header.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Calendar::Next", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/next.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Calendar::Prev", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/prev.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Calendar::Title", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/title.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Calendar::Weekdays", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/weekdays.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Popover", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/popover.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Popover::Trigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/popover/trigger.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Popover::Content", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/popover/content.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Calendar", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CalendarBody", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/body.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CalendarDays", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/days.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CalendarHeader", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/header.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CalendarNext", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/next.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CalendarPrev", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/prev.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CalendarTitle", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/title.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "CalendarWeekdays", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/calendar/weekdays.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "Popover", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/popover.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "PopoverTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/popover/trigger.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "PopoverContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/popover/content.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/docs/dialog_view.rb b/app/views/docs/dialog_view.rb
index 77353cc..4f27bab 100644
--- a/app/views/docs/dialog_view.rb
+++ b/app/views/docs/dialog_view.rb
@@ -5,21 +5,21 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Dialog", description: "A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Example", context: self) do
         <<~RUBY
-          render PhlexUI::Dialog.new do
-            render PhlexUI::Dialog::Trigger.new do
-              render PhlexUI::Button.new { "Open Dialog" }
+          Dialog do
+            DialogTrigger do
+              Button { "Open Dialog" }
             end
-            render PhlexUI::Dialog::Content.new do
-              render PhlexUI::Dialog::Header.new do
-                render PhlexUI::Dialog::Title.new { "PhlexUI to the rescue" }
-                render PhlexUI::Dialog::Description.new { "PhlexUI helps you build accessible standard compliant web apps with ease" }
+            DialogContent do
+              DialogHeader do
+                DialogTitle { "PhlexUI to the rescue" }
+                DialogDescription { "PhlexUI helps you build accessible standard compliant web apps with ease" }
               end
-              render PhlexUI::Dialog::Middle.new do
-                render PhlexUI::AspectRatio.new(aspect_ratio: "16/9", class: 'rounded-md overflow-hidden border') do
+              DialogMiddle do
+                AspectRatio(aspect_ratio: "16/9", class: 'rounded-md overflow-hidden border') do
                   img(
                     alt: "Placeholder",
                     loading: "lazy",
@@ -28,9 +28,9 @@ def view_template
                   )
                 end
               end
-              render PhlexUI::Dialog::Footer.new do
-                render PhlexUI::Button.new(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
-                render PhlexUI::Button.new { "Save" }
+              DialogFooter do
+                Button(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
+                Button { "Save" }
               end
             end
           end
@@ -40,17 +40,17 @@ def view_template
       render Docs::VisualCodeExample.new(title: "Size", description: "Applicable for wider screens", context: self) do
         <<~RUBY
           div(class: 'flex flex-wrap justify-center gap-2') do
-            render PhlexUI::Dialog.new do
-              render PhlexUI::Dialog::Trigger.new do
-                render PhlexUI::Button.new { "Small Dialog" }
+            Dialog do
+              DialogTrigger do
+                Button { "Small Dialog" }
               end
-              render PhlexUI::Dialog::Content.new(size: :sm) do
-                render PhlexUI::Dialog::Header.new do
-                  render PhlexUI::Dialog::Title.new { "PhlexUI to the rescue" }
-                  render PhlexUI::Dialog::Description.new { "PhlexUI helps you build accessible standard compliant web apps with ease" }
+              DialogContent(size: :sm) do
+                DialogHeader do
+                  DialogTitle { "PhlexUI to the rescue" }
+                  DialogDescription { "PhlexUI helps you build accessible standard compliant web apps with ease" }
                 end
-                render PhlexUI::Dialog::Middle.new do
-                  render PhlexUI::AspectRatio.new(aspect_ratio: "16/9", class: 'rounded-md overflow-hidden border') do
+                DialogMiddle do
+                  AspectRatio(aspect_ratio: "16/9", class: 'rounded-md overflow-hidden border') do
                     img(
                       alt: "Placeholder",
                       loading: "lazy",
@@ -59,24 +59,24 @@ def view_template
                     )
                   end
                 end
-                render PhlexUI::Dialog::Footer.new do
-                  render PhlexUI::Button.new(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
-                  render PhlexUI::Button.new { "Save" }
+                DialogFooter do
+                  Button(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
+                  Button { "Save" }
                 end
               end
             end
 
-            render PhlexUI::Dialog.new do
-              render PhlexUI::Dialog::Trigger.new do
-                render PhlexUI::Button.new { "Large Dialog" }
+            Dialog do
+              DialogTrigger do
+                Button { "Large Dialog" }
               end
-              render PhlexUI::Dialog::Content.new(size: :lg) do
-                render PhlexUI::Dialog::Header.new do
-                  render PhlexUI::Dialog::Title.new { "PhlexUI to the rescue" }
-                  render PhlexUI::Dialog::Description.new { "PhlexUI helps you build accessible standard compliant web apps with ease" }
+              DialogContent(size: :lg) do
+                DialogHeader do
+                  DialogTitle { "PhlexUI to the rescue" }
+                  DialogDescription { "PhlexUI helps you build accessible standard compliant web apps with ease" }
                 end
-                render PhlexUI::Dialog::Middle.new do
-                  render PhlexUI::AspectRatio.new(aspect_ratio: "16/9", class: 'rounded-md overflow-hidden border') do
+                DialogMiddle do
+                  AspectRatio(aspect_ratio: "16/9", class: 'rounded-md overflow-hidden border') do
                     img(
                       alt: "Placeholder",
                       loading: "lazy",
@@ -85,9 +85,9 @@ def view_template
                     )
                   end
                 end
-                render PhlexUI::Dialog::Footer.new do
-                  render PhlexUI::Button.new(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
-                  render PhlexUI::Button.new { "Save" }
+                DialogFooter do
+                  Button(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
+                  Button { "Save" }
                 end
               end
             end
@@ -105,14 +105,14 @@ def components
     [
       Docs::ComponentStruct.new(name: "DialogController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/dialog_controller.js", built_using: :stimulus),
       Docs::ComponentStruct.new(name: "DismissableController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/dismissable_controller.js", built_using: :stimulus),
-      Docs::ComponentStruct.new(name: "PhlexUI::Dialog", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dialog.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Dialog::Trigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dialog/trigger.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Dialog::Content", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dialog/content.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Dialog::Header", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dialog/header.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Dialog::Title", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dialog/title.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Dialog::Description", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dialog/description.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Dialog::Middle", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dialog/middle.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Dialog::Footer", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dialog/footer.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Dialog", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dialog.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "Trigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dialog/trigger.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "Content", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dialog/content.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "Header", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dialog/header.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "Title", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dialog/title.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "Description", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dialog/description.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "Middle", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dialog/middle.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "Footer", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dialog/footer.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/docs/dropdown_menu_view.rb b/app/views/docs/dropdown_menu_view.rb
index 75b0583..01d7f52 100644
--- a/app/views/docs/dropdown_menu_view.rb
+++ b/app/views/docs/dropdown_menu_view.rb
@@ -5,198 +5,198 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Dropdown Menu", description: "Displays a menu to the user — such as a set of actions or functions — triggered by a button.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Example", context: self) do
         <<~RUBY
-          render PhlexUI::DropdownMenu.new do
-            render PhlexUI::DropdownMenu::Trigger.new(class: 'w-full') do
-              render PhlexUI::Button.new(variant: :outline) { "Open" }
-            end
-            render PhlexUI::DropdownMenu::Content.new do
-              render PhlexUI::DropdownMenu::Label.new { "My Account" }
-              render PhlexUI::DropdownMenu::Separator.new
-              render PhlexUI::DropdownMenu::Item.new(href: '#') { "Profile" }
-              render PhlexUI::DropdownMenu::Item.new(href: '#') { "Billing" }
-              render PhlexUI::DropdownMenu::Item.new(href: '#') { "Team" }
-              render PhlexUI::DropdownMenu::Item.new(href: '#') { "Subscription" }
+          DropdownMenu do
+            DropdownMenuTrigger(class: 'w-full') do
+              Button(variant: :outline) { "Open" }
+            end
+            DropdownMenuContent do
+              DropdownMenuLabel { "My Account" }
+              DropdownMenuSeparator
+              DropdownMenuItem(href: '#') { "Profile" }
+              DropdownMenuItem(href: '#') { "Billing" }
+              DropdownMenuItem(href: '#') { "Team" }
+              DropdownMenuItem(href: '#') { "Subscription" }
             end
           end
         RUBY
       end
 
-      render Docs::VisualCodeExample.new(title: "Placement", description: "If the PhlexUI::DropdownMenu conflicts with edge, it will auto-adjust it's placement", context: self) do
+      render Docs::VisualCodeExample.new(title: "Placement", description: "If the DropdownMenu conflicts with edge, it will auto-adjust it's placement", context: self) do
         <<~RUBY
           div(class: 'grid grid-cols-1 sm:grid-cols-3 gap-4') do
             # -- TOP --
-            render PhlexUI::DropdownMenu.new(options: { placement: 'top' }) do
-              render PhlexUI::DropdownMenu::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'top' }
+            DropdownMenu(options: { placement: 'top' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'top' }
               end
-              render PhlexUI::DropdownMenu::Content.new do
-                render PhlexUI::DropdownMenu::Label.new { "My Account" }
-                render PhlexUI::DropdownMenu::Separator.new
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Profile" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Billing" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Team" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Subscription" }
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
               end
             end
 
-            render PhlexUI::DropdownMenu.new(options: { placement: 'top-start' }) do
-              render PhlexUI::DropdownMenu::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'top-start' }
+            DropdownMenu(options: { placement: 'top-start' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'top-start' }
               end
-              render PhlexUI::DropdownMenu::Content.new do
-                render PhlexUI::DropdownMenu::Label.new { "My Account" }
-                render PhlexUI::DropdownMenu::Separator.new
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Profile" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Billing" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Team" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Subscription" }
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
               end
             end
 
-            render PhlexUI::DropdownMenu.new(options: { placement: 'top-end' }) do
-              render PhlexUI::DropdownMenu::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'top-end' }
+            DropdownMenu(options: { placement: 'top-end' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'top-end' }
               end
-              render PhlexUI::DropdownMenu::Content.new do
-                render PhlexUI::DropdownMenu::Label.new { "My Account" }
-                render PhlexUI::DropdownMenu::Separator.new
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Profile" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Billing" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Team" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Subscription" }
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
               end
             end
 
             # -- BOTTOM --
-            render PhlexUI::DropdownMenu.new(options: { placement: 'bottom' }) do
-              render PhlexUI::DropdownMenu::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'bottom' }
+            DropdownMenu(options: { placement: 'bottom' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'bottom' }
               end
-              render PhlexUI::DropdownMenu::Content.new do
-                render PhlexUI::DropdownMenu::Label.new { "My Account" }
-                render PhlexUI::DropdownMenu::Separator.new
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Profile" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Billing" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Team" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Subscription" }
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
               end
             end
 
-            render PhlexUI::DropdownMenu.new(options: { placement: 'bottom-start' }) do
-              render PhlexUI::DropdownMenu::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'bottom-start' }
+            DropdownMenu(options: { placement: 'bottom-start' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'bottom-start' }
               end
-              render PhlexUI::DropdownMenu::Content.new do
-                render PhlexUI::DropdownMenu::Label.new { "My Account" }
-                render PhlexUI::DropdownMenu::Separator.new
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Profile" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Billing" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Team" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Subscription" }
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
               end
             end
 
-            render PhlexUI::DropdownMenu.new(options: { placement: 'bottom-end' }) do
-              render PhlexUI::DropdownMenu::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'bottom-end' }
+            DropdownMenu(options: { placement: 'bottom-end' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'bottom-end' }
               end
-              render PhlexUI::DropdownMenu::Content.new do
-                render PhlexUI::DropdownMenu::Label.new { "My Account" }
-                render PhlexUI::DropdownMenu::Separator.new
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Profile" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Billing" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Team" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Subscription" }
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
               end
             end
 
             # -- LEFT --
-            render PhlexUI::DropdownMenu.new(options: { placement: 'left' }) do
-              render PhlexUI::DropdownMenu::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'left' }
+            DropdownMenu(options: { placement: 'left' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'left' }
               end
-              render PhlexUI::DropdownMenu::Content.new do
-                render PhlexUI::DropdownMenu::Label.new { "My Account" }
-                render PhlexUI::DropdownMenu::Separator.new
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Profile" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Billing" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Team" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Subscription" }
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
               end
             end
 
-            render PhlexUI::DropdownMenu.new(options: { placement: 'left-start' }) do
-              render PhlexUI::DropdownMenu::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'left-start' }
+            DropdownMenu(options: { placement: 'left-start' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'left-start' }
               end
-              render PhlexUI::DropdownMenu::Content.new do
-                render PhlexUI::DropdownMenu::Label.new { "My Account" }
-                render PhlexUI::DropdownMenu::Separator.new
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Profile" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Billing" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Team" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Subscription" }
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
               end
             end
 
-            render PhlexUI::DropdownMenu.new(options: { placement: 'left-end' }) do
-              render PhlexUI::DropdownMenu::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'left-end' }
+            DropdownMenu(options: { placement: 'left-end' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'left-end' }
               end
-              render PhlexUI::DropdownMenu::Content.new do
-                render PhlexUI::DropdownMenu::Label.new { "My Account" }
-                render PhlexUI::DropdownMenu::Separator.new
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Profile" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Billing" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Team" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Subscription" }
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
               end
             end
 
             # -- RIGHT --
-            render PhlexUI::DropdownMenu.new(options: { placement: 'right' }) do
-              render PhlexUI::DropdownMenu::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'right' }
+            DropdownMenu(options: { placement: 'right' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'right' }
               end
-              render PhlexUI::DropdownMenu::Content.new do
-                render PhlexUI::DropdownMenu::Label.new { "My Account" }
-                render PhlexUI::DropdownMenu::Separator.new
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Profile" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Billing" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Team" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Subscription" }
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
               end
             end
 
-            render PhlexUI::DropdownMenu.new(options: { placement: 'right-start' }) do
-              render PhlexUI::DropdownMenu::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'right-start' }
+            DropdownMenu(options: { placement: 'right-start' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'right-start' }
               end
-              render PhlexUI::DropdownMenu::Content.new do
-                render PhlexUI::DropdownMenu::Label.new { "My Account" }
-                render PhlexUI::DropdownMenu::Separator.new
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Profile" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Billing" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Team" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Subscription" }
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
               end
             end
 
-            render PhlexUI::DropdownMenu.new(options: { placement: 'right-end' }) do
-              render PhlexUI::DropdownMenu::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'right-end' }
+            DropdownMenu(options: { placement: 'right-end' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'right-end' }
               end
-              render PhlexUI::DropdownMenu::Content.new do
-                render PhlexUI::DropdownMenu::Label.new { "My Account" }
-                render PhlexUI::DropdownMenu::Separator.new
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Profile" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Billing" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Team" }
-                render PhlexUI::DropdownMenu::Item.new(href: '#') { "Subscription" }
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
               end
             end
           end
@@ -205,17 +205,17 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "Open on hover", context: self) do
         <<~RUBY
-          render PhlexUI::DropdownMenu.new(options: { trigger: "mouseenter focus" }) do
-            render PhlexUI::DropdownMenu::Trigger.new(class: 'w-full') do
-              render PhlexUI::Button.new(variant: :outline) { "Open" }
-            end
-            render PhlexUI::DropdownMenu::Content.new do
-              render PhlexUI::DropdownMenu::Label.new { "My Account" }
-              render PhlexUI::DropdownMenu::Separator.new
-              render PhlexUI::DropdownMenu::Item.new(href: '#') { "Profile" }
-              render PhlexUI::DropdownMenu::Item.new(href: '#') { "Billing" }
-              render PhlexUI::DropdownMenu::Item.new(href: '#') { "Team" }
-              render PhlexUI::DropdownMenu::Item.new(href: '#') { "Subscription" }
+          DropdownMenu(options: { trigger: "mouseenter focus" }) do
+            DropdownMenuTrigger(class: 'w-full') do
+              Button(variant: :outline) { "Open" }
+            end
+            DropdownMenuContent do
+              DropdownMenuLabel { "My Account" }
+              DropdownMenuSeparator
+              DropdownMenuItem(href: '#') { "Profile" }
+              DropdownMenuItem(href: '#') { "Billing" }
+              DropdownMenuItem(href: '#') { "Team" }
+              DropdownMenuItem(href: '#') { "Subscription" }
             end
           end
         RUBY
@@ -230,12 +230,12 @@ 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: "PhlexUI::DropdownMenu", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dropdown_menu.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::DropdownMenu::Trigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dropdown_menu/trigger.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::DropdownMenu::Content", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dropdown_menu/content.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::DropdownMenu::Label", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dropdown_menu/label.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::DropdownMenu::Item", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dropdown_menu/item.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::DropdownMenu::Separator", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dropdown_menu/separator.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "DropdownMenu", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dropdown_menu.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "DropdownMenuTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dropdown_menu/trigger.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "DropdownMenuContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dropdown_menu/content.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "DropdownMenuLabel", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dropdown_menu/label.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "DropdownMenuItem", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dropdown_menu/item.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "DropdownMenuSeparator", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/dropdown_menu/separator.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/docs/getting_started/dark_mode_view.rb b/app/views/docs/getting_started/dark_mode_view.rb
index 862dc3d..b1f11c4 100644
--- a/app/views/docs/getting_started/dark_mode_view.rb
+++ b/app/views/docs/getting_started/dark_mode_view.rb
@@ -24,7 +24,7 @@ def view_template
         heading2 { "Installation" }
         TypographyP do
           plain "To implement Dark mode, add the "
-          TypographyInlineCode { "PhlexUI::ThemeToggle" }
+          TypographyInlineCode { "ThemeToggle" }
           plain " component (below) to your application layout file. This ensures it's available on all pages."
         end
         TypographyP do
diff --git a/app/views/docs/getting_started/theming_view.rb b/app/views/docs/getting_started/theming_view.rb
index 1f35b93..9a1bae2 100644
--- a/app/views/docs/getting_started/theming_view.rb
+++ b/app/views/docs/getting_started/theming_view.rb
@@ -146,7 +146,7 @@ def css_variables
     end
 
     space_y_2 do
-      TypographySmall { "Muted backgrounds such as PhlexUI::Tabs::List" }
+      TypographySmall { "Muted backgrounds such as TabsList" }
       code = <<~CODE
         --muted: 210 40% 96.1%;
         --muted-foreground: 215.4 16.3% 46.9%;
@@ -163,7 +163,7 @@ def css_variables
     end
 
     space_y_2 do
-      TypographySmall { "Border color for inputs such as PhlexUI::Input, PhlexUI::Select or PhlexUI::Textarea" }
+      TypographySmall { "Border color for inputs such as Input, Select or Textarea" }
       code = <<~CODE
         --input: 214.3 31.8% 91.4%;
       CODE
@@ -171,7 +171,7 @@ def css_variables
     end
 
     space_y_2 do
-      TypographySmall { "Primary colors for PhlexUI::Button" }
+      TypographySmall { "Primary colors for Button" }
       code = <<~CODE
         --primary: 222.2 47.4% 11.2%;
         --primary-foreground: 210 40% 98%;
@@ -180,7 +180,7 @@ def css_variables
     end
 
     space_y_2 do
-      TypographySmall { "Secondary colors for PhlexUI::Button" }
+      TypographySmall { "Secondary colors for Button" }
       code = <<~CODE
         --secondary: 210 40% 96.1%;
         --secondary-foreground: 222.2 47.4% 11.2%;
@@ -189,7 +189,7 @@ def css_variables
     end
 
     space_y_2 do
-      TypographySmall { "Used for accents such as hover effects on PhlexUI::DropdownMenu::Item, PhlexUI::Select::Item... etc" }
+      TypographySmall { "Used for accents such as hover effects on DropdownMenu::Item, Select::Item... etc" }
       code = <<~CODE
         --accent: 210 40% 96.1%;
         --accent-foreground: 222.2 47.4% 11.2%;
@@ -198,7 +198,7 @@ def css_variables
     end
 
     space_y_2 do
-      TypographySmall { "Used for destructive actions such as PhlexUI::Button.new(variant: :destructive)" }
+      TypographySmall { "Used for destructive actions such as Button.new(variant: :destructive)" }
       code = <<~CODE
         --destructive: 0 100% 50%;
         --destructive-foreground: 210 40% 98%;
diff --git a/app/views/docs/hover_card_view.rb b/app/views/docs/hover_card_view.rb
index 7f368a8..234265d 100644
--- a/app/views/docs/hover_card_view.rb
+++ b/app/views/docs/hover_card_view.rb
@@ -5,19 +5,19 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Hover Card", description: "For sighted users to preview content available behind a link.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Example", context: self) do
         <<~RUBY
-          render PhlexUI::HoverCard.new do
-            render PhlexUI::HoverCard::Trigger.new do
-              render PhlexUI::Button.new(variant: :link) { "@joeldrapper" } # Make this a link in order to navigate somewhere
+          HoverCard do
+            HoverCardTrigger do
+              Button(variant: :link) { "@joeldrapper" } # Make this a link in order to navigate somewhere
             end
-            render PhlexUI::HoverCard::Content.new do
+            HoverCardContent do
               div(class: "flex justify-between space-x-4") do
-                render PhlexUI::Avatar.new do
-                  render PhlexUI::Avatar::Image.new(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
-                  render PhlexUI::Avatar::Fallback.new { "JD" }
+                Avatar do
+                  AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
+                  AvatarFallback { "JD" }
                 end
                 div(class: "space-y-1") do
                   h4(class: "text-sm font-medium") { "@joeldrapper" }
@@ -59,9 +59,9 @@ 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: "PhlexUI::HoverCard", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/hover_card.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::HoverCard::Trigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/hover_card/trigger.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::HoverCard::Content", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/hover_card/content.rb", built_using: :phlex)
+      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)
     ]
   end
 end
diff --git a/app/views/docs/input_view.rb b/app/views/docs/input_view.rb
index c599202..a372fa7 100644
--- a/app/views/docs/input_view.rb
+++ b/app/views/docs/input_view.rb
@@ -5,12 +5,12 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Input", description: "Displays a form input field or a component that looks like an input field.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Email", context: self) do
         <<~RUBY
           div(class: 'grid w-full max-w-sm items-center gap-1.5') do
-            render PhlexUI::Input.new(type: "email", placeholder: "Email")
+            Input(type: "email", placeholder: "Email")
           end
         RUBY
       end
@@ -18,9 +18,9 @@ def view_template
       render Docs::VisualCodeExample.new(title: "File", context: self) do
         <<~RUBY
           div(class: "grid w-full max-w-sm items-center gap-1.5") do
-            render PhlexUI::Form::Item.new do
-              render PhlexUI::Label.new(for: "picture") { "Picture" }
-              render PhlexUI::Input.new(type: "file", id: "picture")
+            FormItem do
+              Label(for: "picture") { "Picture" }
+              Input(type: "file", id: "picture")
             end
           end
         RUBY
@@ -29,7 +29,7 @@ def view_template
       render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
         <<~RUBY
           div(class: 'grid w-full max-w-sm items-center gap-1.5') do
-            render PhlexUI::Input.new(disabled: true, type: "email", placeholder: "Email")
+            Input(disabled: true, type: "email", placeholder: "Email")
           end
         RUBY
       end
@@ -37,9 +37,9 @@ def view_template
       render Docs::VisualCodeExample.new(title: "With label", context: self) do
         <<~RUBY
           div(class: 'grid w-full max-w-sm items-center gap-1.5') do
-            render PhlexUI::Form::Item.new do
-              render PhlexUI::Label.new(for: "email1") { "Email" }
-              render PhlexUI::Input.new(type: "email", placeholder: "Email", id: "email1")
+            FormItem do
+              Label(for: "email1") { "Email" }
+              Input(type: "email", placeholder: "Email", id: "email1")
             end
           end
         RUBY
@@ -48,9 +48,9 @@ def view_template
       render Docs::VisualCodeExample.new(title: "With error", context: self) do
         <<~RUBY
           div(class: 'grid w-full max-w-sm items-center gap-1.5') do
-            render PhlexUI::Form::Item.new do
-              render PhlexUI::Label.new(for: "email1") { "Email" }
-              render PhlexUI::Input.new(type: "email", placeholder: "Email", id: "email1", value: "joel@mail", error: "Invalid email address")
+            FormItem do
+              Label(for: "email1") { "Email" }
+              Input(type: "email", placeholder: "Email", id: "email1", value: "joel@mail", error: "Invalid email address")
             end
           end
         RUBY
@@ -59,32 +59,22 @@ def view_template
       render Docs::VisualCodeExample.new(title: "With button", context: self) do
         <<~RUBY
           div(class: 'flex w-full max-w-sm items-center space-x-2') do
-            render PhlexUI::Input.new(type: "email", placeholder: "Email")
-            render PhlexUI::Button.new { "Subscribe" }
-          end
-        RUBY
-      end
-
-      render Docs::VisualCodeExample.new(title: "Form", context: self) do
-        <<~RUBY
-          render PhlexUI::Form::Builder.new(class: 'w-full max-w-sm') do |f|
-            f.input "name", type: :string, placeholder: "Joel Drapper"
-            f.input "email", type: :email, placeholder: "joel@drapper.me"
-            f.button { "Update" }
+            Input(type: "email", placeholder: "Email")
+            Button { "Subscribe" }
           end
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Form (Deconstructed)", context: self) do
         <<~RUBY
-          render PhlexUI::Form.new(class: 'w-full max-w-sm') do
-            render PhlexUI::Form::Spacer.new do
-              render PhlexUI::Form::Item.new do
-                render PhlexUI::Label.new(for: "username") { "Username" }
-                render PhlexUI::Input.new(type: "string", placeholder: "Username", id: "username")
-                render PhlexUI::Hint.new { "Can only contain letters, numbers, and underscores." }
+          Form(class: 'w-full max-w-sm') do
+            FormSpacer do
+              FormItem do
+                Label(for: "username") { "Username" }
+                Input(type: "string", placeholder: "Username", id: "username")
+                Hint { "Can only contain letters, numbers, and underscores." }
               end
-              render PhlexUI::Button.new(type: "submit") { "Submit" }
+              Button(type: "submit") { "Submit" }
             end
           end
         RUBY
@@ -99,13 +89,12 @@ def view_template
   def components
     [
       Docs::ComponentStruct.new(name: "InputController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/input_controller.js", built_using: :stimulus),
-      Docs::ComponentStruct.new(name: "PhlexUI::Input", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/input.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Label", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/label.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Hint", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/hint.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Form::Builder", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/form/builder.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Form", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/form.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Form::Spacer", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/form/spacer.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Form::Item", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/form/item.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Input", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/input.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "Label", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/label.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "Hint", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/hint.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "Form", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/form.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "FormSpacer", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/form/spacer.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "FormItem", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/form/item.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/docs/link_view.rb b/app/views/docs/link_view.rb
index 99360be..8f919f5 100644
--- a/app/views/docs/link_view.rb
+++ b/app/views/docs/link_view.rb
@@ -5,35 +5,35 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Link", description: "Displays a link that looks like a button or underline link.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Example", description: "This is the default appearance of a Link", context: self) do
         <<~RUBY
-          render PhlexUI::Link.new(href: "#") { "Link" }
+          Link(href: "#") { "Link" }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Primary", description: "This is the primary variant of a Link", context: self) do
         <<~RUBY
-          render PhlexUI::Link.new(href: "#", variant: :primary) { "Primary" }
+          Link(href: "#", variant: :primary) { "Primary" }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Secondary", description: "This is the secondary variant of a Link", context: self) do
         <<~RUBY
-          render PhlexUI::Link.new(href: "#", variant: :secondary) { "Secondary" }
+          Link(href: "#", variant: :secondary) { "Secondary" }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Destructive", description: "This is the destructive variant of a Link", context: self) do
         <<~RUBY
-          render PhlexUI::Link.new(href: "#", variant: :destructive) { "Destructive" }
+          Link(href: "#", variant: :destructive) { "Destructive" }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Icon", description: "This is the icon variant of a Link", context: self) do
         <<~RUBY
-          render PhlexUI::Link.new(href: "#", variant: :outline, icon: true) do 
+          Link(href: "#", variant: :outline, icon: true) do 
             chevron_icon
           end
         RUBY
@@ -41,7 +41,7 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "With Icon", description: "This is the primary variant of a Link with an icon", context: self) do
         <<~RUBY
-          render PhlexUI::Link.new(href: "#", variant: :primary) do 
+          Link(href: "#", variant: :primary) do 
             email_icon
             span { "Login with Email" }
           end
@@ -50,7 +50,7 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "Ghost", description: "This is the ghost variant of a Link", context: self) do
         <<~RUBY
-          render PhlexUI::Link.new(href: "#", variant: :ghost) { "Ghost" }
+          Link(href: "#", variant: :ghost) { "Ghost" }
         RUBY
       end
 
@@ -62,7 +62,7 @@ def view_template
 
   def components
     [
-      Docs::ComponentStruct.new(name: "PhlexUI::Link", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/link.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Link", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/link.rb", built_using: :phlex)
     ]
   end
 
diff --git a/app/views/docs/pagination_view.rb b/app/views/docs/pagination_view.rb
index 23cae3f..aacc627 100644
--- a/app/views/docs/pagination_view.rb
+++ b/app/views/docs/pagination_view.rb
@@ -5,34 +5,34 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Pagination", description: "Pagination with page navigation, next and previous links.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Example", description: "This is the default appearance of a Pagination", context: self) do
         <<~RUBY
-          render PhlexUI::Pagination.new do
-            render PhlexUI::Pagination::Content.new do
-              render PhlexUI::Pagination::Item.new(href: "#") do
+          Pagination do
+            PaginationContent do
+              PaginationItem(href: "#") do
                 chevrons_left_icon
                 plain "First"
               end
-              render PhlexUI::Pagination::Item.new(href: "#") do
+              PaginationItem(href: "#") do
                 chevron_left_icon
                 plain "Prev"
               end
 
-              render PhlexUI::Pagination::Ellipsis.new
+              PaginationEllipsis
 
-              render PhlexUI::Pagination::Item.new(href: "#") { "4" }
-              render PhlexUI::Pagination::Item.new(href: "#", active: true) { "5" }
-              render PhlexUI::Pagination::Item.new(href: "#") { "6" }
+              PaginationItem(href: "#") { "4" }
+              PaginationItem(href: "#", active: true) { "5" }
+              PaginationItem(href: "#") { "6" }
 
-              render PhlexUI::Pagination::Ellipsis.new
+              PaginationEllipsis
 
-              render PhlexUI::Pagination::Item.new(href: "#") do
+              PaginationItem(href: "#") do
                 plain "Next"
                 chevron_right_icon
               end
-              render PhlexUI::Pagination::Item.new(href: "#") do
+              PaginationItem(href: "#") do
                 plain "Last"
                 chevrons_right_icon
               end
@@ -49,10 +49,10 @@ def view_template
 
   def components
     [
-      Docs::ComponentStruct.new(name: "PhlexUI::Pagination", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/pagination.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Pagination::Content", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/pagination/content.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Pagination::Ellipsis", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/pagination/ellipsis.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Pagination::Item", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/pagination/item.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Pagination", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/pagination.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "PaginationContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/pagination/content.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "PaginationEllipsis", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/pagination/ellipsis.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "PaginationItem", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/pagination/item.rb", built_using: :phlex)
     ]
   end
 
diff --git a/app/views/docs/popover_view.rb b/app/views/docs/popover_view.rb
index d060b35..958df43 100644
--- a/app/views/docs/popover_view.rb
+++ b/app/views/docs/popover_view.rb
@@ -7,12 +7,12 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "Example", context: self) do
         <<~RUBY
-          render PhlexUI::Popover.new do
-            render PhlexUI::Popover::Trigger.new(class: 'w-full') do
-              render PhlexUI::Button.new(variant: :outline) { "Open Popover" }
+          Popover do
+            PopoverTrigger(class: 'w-full') do
+              Button(variant: :outline) { "Open Popover" }
             end
-            render PhlexUI::Popover::Content.new(class: 'w-40') do
-              render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+            PopoverContent(class: 'w-40') do
+              Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                 svg(
                   xmlns: "http://www.w3.org/2000/svg",
                   fill: "none",
@@ -30,7 +30,7 @@ def view_template
                 end
                 plain "Profile"
               end
-              render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+              Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                 svg(
                   xmlns: "http://www.w3.org/2000/svg",
                   fill: "none",
@@ -53,7 +53,7 @@ def view_template
                 end
                 plain "Settings"
               end
-              render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+              Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                 svg(
                   xmlns: "http://www.w3.org/2000/svg",
                   fill: "none",
@@ -80,12 +80,12 @@ def view_template
         <<~RUBY
           div(class: 'grid grid-cols-1 sm:grid-cols-3 gap-4') do
             # -- TOP --
-            render PhlexUI::Popover.new(options: { placement: 'top' }) do
-              render PhlexUI::Popover::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'top' }
+            Popover(options: { placement: 'top' }) do
+              PopoverTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'top' }
               end
-              render PhlexUI::Popover::Content.new(class: 'w-40') do
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+              PopoverContent(class: 'w-40') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -103,7 +103,7 @@ def view_template
                   end
                   plain "Profile"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -126,7 +126,7 @@ def view_template
                   end
                   plain "Settings"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -147,12 +147,12 @@ def view_template
               end
             end
 
-            render PhlexUI::Popover.new(options: { placement: 'top-start' }) do
-              render PhlexUI::Popover::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'top-start' }
+            Popover(options: { placement: 'top-start' }) do
+              PopoverTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'top-start' }
               end
-              render PhlexUI::Popover::Content.new(class: 'w-40') do
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+              PopoverContent(class: 'w-40') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -170,7 +170,7 @@ def view_template
                   end
                   plain "Profile"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -193,7 +193,7 @@ def view_template
                   end
                   plain "Settings"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -214,12 +214,12 @@ def view_template
               end
             end
 
-            render PhlexUI::Popover.new(options: { placement: 'top-end' }) do
-              render PhlexUI::Popover::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'top-end' }
+            Popover(options: { placement: 'top-end' }) do
+              PopoverTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'top-end' }
               end
-              render PhlexUI::Popover::Content.new(class: 'w-40') do
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+              PopoverContent(class: 'w-40') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -237,7 +237,7 @@ def view_template
                   end
                   plain "Profile"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -260,7 +260,7 @@ def view_template
                   end
                   plain "Settings"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -282,12 +282,12 @@ def view_template
             end
 
             # -- RIGHT --
-            render PhlexUI::Popover.new(options: { placement: 'right' }) do
-              render PhlexUI::Popover::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'right' }
+            Popover(options: { placement: 'right' }) do
+              PopoverTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'right' }
               end
-              render PhlexUI::Popover::Content.new(class: 'w-40') do
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+              PopoverContent(class: 'w-40') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -305,7 +305,7 @@ def view_template
                   end
                   plain "Profile"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -328,7 +328,7 @@ def view_template
                   end
                   plain "Settings"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -349,12 +349,12 @@ def view_template
               end
             end
 
-            render PhlexUI::Popover.new(options: { placement: 'right-start' }) do
-              render PhlexUI::Popover::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'right-start' }
+            Popover(options: { placement: 'right-start' }) do
+              PopoverTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'right-start' }
               end
-              render PhlexUI::Popover::Content.new(class: 'w-40') do
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+              PopoverContent(class: 'w-40') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -372,7 +372,7 @@ def view_template
                   end
                   plain "Profile"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -395,7 +395,7 @@ def view_template
                   end
                   plain "Settings"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -416,12 +416,12 @@ def view_template
               end
             end
 
-            render PhlexUI::Popover.new(options: { placement: 'right-end' }) do
-              render PhlexUI::Popover::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'right-end' }
+            Popover(options: { placement: 'right-end' }) do
+              PopoverTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'right-end' }
               end
-              render PhlexUI::Popover::Content.new(class: 'w-40') do
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+              PopoverContent(class: 'w-40') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -439,7 +439,7 @@ def view_template
                   end
                   plain "Profile"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -462,7 +462,7 @@ def view_template
                   end
                   plain "Settings"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -484,12 +484,12 @@ def view_template
             end
 
             # -- LEFT --
-            render PhlexUI::Popover.new(options: { placement: 'left' }) do
-              render PhlexUI::Popover::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'left' }
+            Popover(options: { placement: 'left' }) do
+              PopoverTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'left' }
               end
-              render PhlexUI::Popover::Content.new(class: 'w-40') do
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+              PopoverContent(class: 'w-40') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -507,7 +507,7 @@ def view_template
                   end
                   plain "Profile"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -530,7 +530,7 @@ def view_template
                   end
                   plain "Settings"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -551,12 +551,12 @@ def view_template
               end
             end
 
-            render PhlexUI::Popover.new(options: { placement: 'left-start' }) do
-              render PhlexUI::Popover::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'left-start' }
+            Popover(options: { placement: 'left-start' }) do
+              PopoverTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'left-start' }
               end
-              render PhlexUI::Popover::Content.new(class: 'w-40') do
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+              PopoverContent(class: 'w-40') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -574,7 +574,7 @@ def view_template
                   end
                   plain "Profile"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -597,7 +597,7 @@ def view_template
                   end
                   plain "Settings"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -618,12 +618,12 @@ def view_template
               end
             end
 
-            render PhlexUI::Popover.new(options: { placement: 'left-end' }) do
-              render PhlexUI::Popover::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'left-end' }
+            Popover(options: { placement: 'left-end' }) do
+              PopoverTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'left-end' }
               end
-              render PhlexUI::Popover::Content.new(class: 'w-40') do
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+              PopoverContent(class: 'w-40') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -641,7 +641,7 @@ def view_template
                   end
                   plain "Profile"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -664,7 +664,7 @@ def view_template
                   end
                   plain "Settings"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -686,12 +686,12 @@ def view_template
             end
 
             # -- BOTTOM --
-            render PhlexUI::Popover.new(options: { placement: 'bottom' }) do
-              render PhlexUI::Popover::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'bottom' }
+            Popover(options: { placement: 'bottom' }) do
+              PopoverTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'bottom' }
               end
-              render PhlexUI::Popover::Content.new(class: 'w-40') do
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+              PopoverContent(class: 'w-40') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -709,7 +709,7 @@ def view_template
                   end
                   plain "Profile"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -732,7 +732,7 @@ def view_template
                   end
                   plain "Settings"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -753,12 +753,12 @@ def view_template
               end
             end
 
-            render PhlexUI::Popover.new(options: { placement: 'bottom-start' }) do
-              render PhlexUI::Popover::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'bottom-start' }
+            Popover(options: { placement: 'bottom-start' }) do
+              PopoverTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'bottom-start' }
               end
-              render PhlexUI::Popover::Content.new(class: 'w-40') do
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+              PopoverContent(class: 'w-40') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -776,7 +776,7 @@ def view_template
                   end
                   plain "Profile"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -799,7 +799,7 @@ def view_template
                   end
                   plain "Settings"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -820,12 +820,12 @@ def view_template
               end
             end
 
-            render PhlexUI::Popover.new(options: { placement: 'bottom-end' }) do
-              render PhlexUI::Popover::Trigger.new(class: 'w-full') do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { 'bottom-end' }
+            Popover(options: { placement: 'bottom-end' }) do
+              PopoverTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'bottom-end' }
               end
-              render PhlexUI::Popover::Content.new(class: 'w-40') do
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+              PopoverContent(class: 'w-40') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -843,7 +843,7 @@ def view_template
                   end
                   plain "Profile"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -866,7 +866,7 @@ def view_template
                   end
                   plain "Settings"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -892,12 +892,12 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "Trigger", context: self) do
         <<~RUBY
-          render PhlexUI::Popover.new(options: { trigger: 'click' }) do
-            render PhlexUI::Popover::Trigger.new(class: 'w-full') do
-              render PhlexUI::Button.new(variant: :outline) { "Click" }
+          Popover(options: { trigger: 'click' }) do
+            PopoverTrigger(class: 'w-full') do
+              Button(variant: :outline) { "Click" }
             end
-            render PhlexUI::Popover::Content.new(class: 'w-40') do
-              render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+            PopoverContent(class: 'w-40') do
+              Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -915,7 +915,7 @@ def view_template
                   end
                   plain "Profile"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -938,7 +938,7 @@ def view_template
                   end
                   plain "Settings"
                 end
-                render PhlexUI::Link.new(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
+                Link(href: "#", variant: :ghost, class: 'block w-full justify-start pl-2') do
                   svg(
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -970,9 +970,9 @@ 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: "PhlexUI::Popover", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/popover.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Popover::Trigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/popover/trigger.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Popover::Content", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/popover/content.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Popover", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/popover.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "PopoverTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/popover/trigger.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "PopoverContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/popover/content.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/docs/select_view.rb b/app/views/docs/select_view.rb
index e8ecd6b..49950ed 100644
--- a/app/views/docs/select_view.rb
+++ b/app/views/docs/select_view.rb
@@ -5,51 +5,23 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Select", description: "Displays a list of options for the user to pick from—triggered by a button.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
-
-      render Docs::VisualCodeExample.new(title: "Select with object (With Builder)", description: "Change the Post object for your own", context: self) do
-        <<~RUBY
-          people = [
-            ["John Doe", 1],
-            ["Jane Doe", 2],
-            ["Sam Smith", 3],
-          ]
-
-          div(class: 'w-56 flex items-center justify-center') do
-            render PhlexUI::Select::Builder.new(Post.new(id: 1, person_id: 2), "person_id", collection: people, placeholder: 'Select a person')
-          end
-        RUBY
-      end
-
-      render Docs::VisualCodeExample.new(title: "Select with text (With Builder)", context: self) do
-        <<~RUBY
-          people = [
-            ["John Doe", 1],
-            ["Jane Doe", 2],
-            ["Sam Smith", 3],
-          ]
-
-          div(class: 'w-56 flex items-center justify-center') do
-            render PhlexUI::Select::Builder.new("post", "person_id", collection: people, placeholder: 'Select a person')
-          end
-        RUBY
-      end
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Select (Deconstructed)", context: self) do
         <<~RUBY
           div(class: 'w-56 flex items-center justify-center') do
-            render PhlexUI::Select.new do
-              render PhlexUI::Select::Input.new(value: "apple", id: "select-a-fruit")
-              render PhlexUI::Select::Trigger.new do
-                render PhlexUI::Select::Value.new(placeholder: 'Select a fruit', id: "select-a-fruit") { "Apple" }
+            Select do
+              SelectInput(value: "apple", id: "select-a-fruit")
+              SelectTrigger do
+                SelectValue(placeholder: 'Select a fruit', id: "select-a-fruit") { "Apple" }
               end
-              render PhlexUI::Select::Content.new(outlet_id: "select-a-fruit") do
-                render PhlexUI::Select::Group.new do
-                  render PhlexUI::Select::Label.new { "Fruits" }
-                  render PhlexUI::Select::Item.new(value: "apple") { "Apple" }
-                  render PhlexUI::Select::Item.new(value: "orange") { "Orange" }
-                  render PhlexUI::Select::Item.new(value: "banana") { "Banana" }
-                  render PhlexUI::Select::Item.new(value: "watermelon") { "Watermelon" }
+              SelectContent(outlet_id: "select-a-fruit") do
+                SelectGroup do
+                  SelectLabel { "Fruits" }
+                  SelectItem(value: "apple") { "Apple" }
+                  SelectItem(value: "orange") { "Orange" }
+                  SelectItem(value: "banana") { "Banana" }
+                  SelectItem(value: "watermelon") { "Watermelon" }
                 end
               end
             end
@@ -68,16 +40,14 @@ def components
       Docs::ComponentStruct.new(name: "SelectController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/select_controller.js", built_using: :stimulus),
       Docs::ComponentStruct.new(name: "TextController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/text_controller.js", built_using: :stimulus),
       Docs::ComponentStruct.new(name: "InputController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/input_controller.js", built_using: :stimulus),
-
-      Docs::ComponentStruct.new(name: "PhlexUI::Select", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/select.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Select::Trigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/select/trigger.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Select::Content", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/select/content.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Select::Label", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/select/label.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Select::Item", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/select/item.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Select::Group", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/select/group.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Select::Input", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/select/input.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Select::Value", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/select/value.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Select::Builder", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/select/builder.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Select", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/select.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "SelectTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/select/trigger.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "SelectContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/select/content.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "SelectLabel", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/select/label.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "SelectItem", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/select/item.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "SelectGroup", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/select/group.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "SelectInput", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/select/input.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "SelectValue", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/select/value.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/docs/sheet_view.rb b/app/views/docs/sheet_view.rb
index 74857e4..68cf396 100644
--- a/app/views/docs/sheet_view.rb
+++ b/app/views/docs/sheet_view.rb
@@ -9,35 +9,35 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Sheet", description: "Extends the Sheet component to display content that complements the main content of the screen.", premium: @premium)
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Example", context: self, premium: @premium) do
         <<~RUBY
-          render PhlexUI::Sheet.new do
-            render PhlexUI::Sheet::Trigger.new do
-              render PhlexUI::Button.new(variant: :outline) { "Open Sheet" }
+          Sheet do
+            SheetTrigger do
+              Button(variant: :outline) { "Open Sheet" }
             end
-            render PhlexUI::Sheet::Content.new(class: 'sm:max-w-sm') do
-              render PhlexUI::Sheet::Header.new do
-                render PhlexUI::Sheet::Title.new { "Edit profile" }
-                render PhlexUI::Sheet::Description.new { "Make changes to your profile here. Click save when you're done." }
+            SheetContent(class: 'sm:max-w-sm') do
+              SheetHeader do
+                SheetTitle { "Edit profile" }
+                SheetDescription { "Make changes to your profile here. Click save when you're done." }
               end
-              render PhlexUI::Form.new do
-                render PhlexUI::Sheet::Middle.new do
-                  render PhlexUI::Form::Spacer.new do
-                    render PhlexUI::Form::Item.new do
-                      render PhlexUI::Label.new { "Name" }
-                      render PhlexUI::Input.new(placeholder: "Joel Drapper") { "Joel Drapper" }
+              Form do
+                SheetMiddle do
+                  FormSpacer do
+                    FormItem do
+                      Label { "Name" }
+                      Input(placeholder: "Joel Drapper") { "Joel Drapper" }
                     end
-                    render PhlexUI::Form::Item.new do
-                      render PhlexUI::Label.new { "Email" }
-                      render PhlexUI::Input.new(placeholder: "joel@drapper.me")
+                    FormItem do
+                      Label { "Email" }
+                      Input(placeholder: "joel@drapper.me")
                     end
                   end
                 end
-                render PhlexUI::Sheet::Footer.new do
-                  render PhlexUI::Button.new(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
-                  render PhlexUI::Button.new(type: "submit") { "Save" }
+                SheetFooter do
+                  Button(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
+                  Button(type: "submit") { "Save" }
                 end
               end
             end
@@ -49,124 +49,124 @@ def view_template
         <<~RUBY
           div(class: 'grid grid-cols-2 gap-4') do
             # -- TOP --
-            render PhlexUI::Sheet.new do
-              render PhlexUI::Sheet::Trigger.new do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { :top }
+            Sheet do
+              SheetTrigger do
+                Button(variant: :outline, class: 'w-full justify-center') { :top }
               end
-              render PhlexUI::Sheet::Content.new(side: :top, class: tokens(-> { [:left, :right].include?(:top) } => "sm:max-w-sm")) do
-                render PhlexUI::Sheet::Header.new do
-                  render PhlexUI::Sheet::Title.new { "Edit profile" }
-                  render PhlexUI::Sheet::Description.new { "Make changes to your profile here. Click save when you're done." }
+              SheetContent(side: :top, class: tokens(-> { [:left, :right].include?(:top) } => "sm:max-w-sm")) do
+                SheetHeader do
+                  SheetTitle { "Edit profile" }
+                  SheetDescription { "Make changes to your profile here. Click save when you're done." }
                 end
-                render PhlexUI::Form.new do
-                  render PhlexUI::Sheet::Middle.new do
-                    render PhlexUI::Form::Spacer.new do
-                      render PhlexUI::Form::Item.new do
-                        render PhlexUI::Label.new { "Name" }
-                        render PhlexUI::Input.new(placeholder: "Joel Drapper") { "Joel Drapper" }
+                Form do
+                  SheetMiddle do
+                    FormSpacer do
+                      FormItem do
+                        Label { "Name" }
+                        Input(placeholder: "Joel Drapper") { "Joel Drapper" }
                       end
-                      render PhlexUI::Form::Item.new do
-                        render PhlexUI::Label.new { "Email" }
-                        render PhlexUI::Input.new(placeholder: "joel@drapper.me")
+                      FormItem do
+                        Label { "Email" }
+                        Input(placeholder: "joel@drapper.me")
                       end
                     end
                   end
-                  render PhlexUI::Sheet::Footer.new do
-                    render PhlexUI::Button.new(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
-                    render PhlexUI::Button.new(type: "submit") { "Save" }
+                  SheetFooter do
+                    Button(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
+                    Button(type: "submit") { "Save" }
                   end
                 end
               end
             end
 
             # -- BOTTOM --
-            render PhlexUI::Sheet.new do
-              render PhlexUI::Sheet::Trigger.new do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { :bottom }
+            Sheet do
+              SheetTrigger do
+                Button(variant: :outline, class: 'w-full justify-center') { :bottom }
               end
-              render PhlexUI::Sheet::Content.new(side: :bottom, class: tokens(-> { [:left, :right].include?(:bottom) } => "sm:max-w-sm")) do
-                render PhlexUI::Sheet::Header.new do
-                  render PhlexUI::Sheet::Title.new { "Edit profile" }
-                  render PhlexUI::Sheet::Description.new { "Make changes to your profile here. Click save when you're done." }
+              SheetContent(side: :bottom, class: tokens(-> { [:left, :right].include?(:bottom) } => "sm:max-w-sm")) do
+                SheetHeader do
+                  SheetTitle { "Edit profile" }
+                  SheetDescription { "Make changes to your profile here. Click save when you're done." }
                 end
-                render PhlexUI::Form.new do
-                  render PhlexUI::Sheet::Middle.new do
-                    render PhlexUI::Form::Spacer.new do
-                      render PhlexUI::Form::Item.new do
-                        render PhlexUI::Label.new { "Name" }
-                        render PhlexUI::Input.new(placeholder: "Joel Drapper") { "Joel Drapper" }
+                Form do
+                  SheetMiddle do
+                    FormSpacer do
+                      FormItem do
+                        Label { "Name" }
+                        Input(placeholder: "Joel Drapper") { "Joel Drapper" }
                       end
-                      render PhlexUI::Form::Item.new do
-                        render PhlexUI::Label.new { "Email" }
-                        render PhlexUI::Input.new(placeholder: "joel@drapper.me")
+                      FormItem do
+                        Label { "Email" }
+                        Input(placeholder: "joel@drapper.me")
                       end
                     end
                   end
-                  render PhlexUI::Sheet::Footer.new do
-                    render PhlexUI::Button.new(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
-                    render PhlexUI::Button.new(type: "submit") { "Save" }
+                  SheetFooter do
+                    Button(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
+                    Button(type: "submit") { "Save" }
                   end
                 end
               end
             end
 
             # -- LEFT --
-            render PhlexUI::Sheet.new do
-              render PhlexUI::Sheet::Trigger.new do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { :left }
+            Sheet do
+              SheetTrigger do
+                Button(variant: :outline, class: 'w-full justify-center') { :left }
               end
-              render PhlexUI::Sheet::Content.new(side: :left, class: tokens(-> { [:left, :right].include?(:left) } => "sm:max-w-sm")) do
-                render PhlexUI::Sheet::Header.new do
-                  render PhlexUI::Sheet::Title.new { "Edit profile" }
-                  render PhlexUI::Sheet::Description.new { "Make changes to your profile here. Click save when you're done." }
+              SheetContent(side: :left, class: tokens(-> { [:left, :right].include?(:left) } => "sm:max-w-sm")) do
+                SheetHeader do
+                  SheetTitle { "Edit profile" }
+                  SheetDescription { "Make changes to your profile here. Click save when you're done." }
                 end
-                render PhlexUI::Form.new do
-                  render PhlexUI::Sheet::Middle.new do
-                    render PhlexUI::Form::Spacer.new do
-                      render PhlexUI::Form::Item.new do
-                        render PhlexUI::Label.new { "Name" }
-                        render PhlexUI::Input.new(placeholder: "Joel Drapper") { "Joel Drapper" }
+                Form do
+                  SheetMiddle do
+                    FormSpacer do
+                      FormItem do
+                        Label { "Name" }
+                        Input(placeholder: "Joel Drapper") { "Joel Drapper" }
                       end
-                      render PhlexUI::Form::Item.new do
-                        render PhlexUI::Label.new { "Email" }
-                        render PhlexUI::Input.new(placeholder: "joel@drapper.me")
+                      FormItem do
+                        Label { "Email" }
+                        Input(placeholder: "joel@drapper.me")
                       end
                     end
                   end
-                  render PhlexUI::Sheet::Footer.new do
-                    render PhlexUI::Button.new(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
-                    render PhlexUI::Button.new(type: "submit") { "Save" }
+                  SheetFooter do
+                    Button(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
+                    Button(type: "submit") { "Save" }
                   end
                 end
               end
             end
 
             # -- RIGHT --
-            render PhlexUI::Sheet.new do
-              render PhlexUI::Sheet::Trigger.new do
-                render PhlexUI::Button.new(variant: :outline, class: 'w-full justify-center') { :right }
+            Sheet do
+              SheetTrigger do
+                Button(variant: :outline, class: 'w-full justify-center') { :right }
               end
-              render PhlexUI::Sheet::Content.new(side: :right, class: tokens(-> { [:left, :right].include?(:right) } => "sm:max-w-sm")) do
-                render PhlexUI::Sheet::Header.new do
-                  render PhlexUI::Sheet::Title.new { "Edit profile" }
-                  render PhlexUI::Sheet::Description.new { "Make changes to your profile here. Click save when you're done." }
+              SheetContent(side: :right, class: tokens(-> { [:left, :right].include?(:right) } => "sm:max-w-sm")) do
+                SheetHeader do
+                  SheetTitle { "Edit profile" }
+                  SheetDescription { "Make changes to your profile here. Click save when you're done." }
                 end
-                render PhlexUI::Form.new do
-                  render PhlexUI::Sheet::Middle.new do
-                    render PhlexUI::Form::Spacer.new do
-                      render PhlexUI::Form::Item.new do
-                        render PhlexUI::Label.new { "Name" }
-                        render PhlexUI::Input.new(placeholder: "Joel Drapper") { "Joel Drapper" }
+                Form do
+                  SheetMiddle do
+                    FormSpacer do
+                      FormItem do
+                        Label { "Name" }
+                        Input(placeholder: "Joel Drapper") { "Joel Drapper" }
                       end
-                      render PhlexUI::Form::Item.new do
-                        render PhlexUI::Label.new { "Email" }
-                        render PhlexUI::Input.new(placeholder: "joel@drapper.me")
+                      FormItem do
+                        Label { "Email" }
+                        Input(placeholder: "joel@drapper.me")
                       end
                     end
                   end
-                  render PhlexUI::Sheet::Footer.new do
-                    render PhlexUI::Button.new(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
-                    render PhlexUI::Button.new(type: "submit") { "Save" }
+                  SheetFooter do
+                    Button(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
+                    Button(type: "submit") { "Save" }
                   end
                 end
               end
@@ -177,31 +177,31 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "Custom size", context: self, premium: @premium) do
         <<~RUBY
-          render PhlexUI::Sheet.new do
-            render PhlexUI::Sheet::Trigger.new do
-              render PhlexUI::Button.new(variant: :outline) { "Open Sheet" }
+          Sheet do
+            SheetTrigger do
+              Button(variant: :outline) { "Open Sheet" }
             end
-            render PhlexUI::Sheet::Content.new(class: 'w-3/4') do
-              render PhlexUI::Sheet::Header.new do
-                render PhlexUI::Sheet::Title.new { "Edit profile" }
-                render PhlexUI::Sheet::Description.new { "Make changes to your profile here. Click save when you're done." }
+            SheetContent(class: 'w-3/4') do
+              SheetHeader do
+                SheetTitle { "Edit profile" }
+                SheetDescription { "Make changes to your profile here. Click save when you're done." }
               end
-              render PhlexUI::Form.new do
-                render PhlexUI::Sheet::Middle.new do
-                  render PhlexUI::Form::Spacer.new do
-                    render PhlexUI::Form::Item.new do
-                      render PhlexUI::Label.new { "Name" }
-                      render PhlexUI::Input.new(placeholder: "Joel Drapper") { "Joel Drapper" }
+              Form do
+                SheetMiddle do
+                  FormSpacer do
+                    FormItem do
+                      Label { "Name" }
+                      Input(placeholder: "Joel Drapper") { "Joel Drapper" }
                     end
-                    render PhlexUI::Form::Item.new do
-                      render PhlexUI::Label.new { "Email" }
-                      render PhlexUI::Input.new(placeholder: "joel@drapper.me")
+                    FormItem do
+                      Label { "Email" }
+                      Input(placeholder: "joel@drapper.me")
                     end
                   end
                 end
-                render PhlexUI::Sheet::Footer.new do
-                  render PhlexUI::Button.new(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
-                  render PhlexUI::Button.new(type: "submit") { "Save" }
+                SheetFooter do
+                  Button(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
+                  Button(type: "submit") { "Save" }
                 end
               end
             end
@@ -218,14 +218,14 @@ def view_template
   def components
     [
       Docs::ComponentStruct.new(name: "SheetController", source: "https://github.com/PhlexUI/phlex_ui_stimulus_pro/blob/main/controllers/sheet_controller.js", built_using: :stimulus),
-      Docs::ComponentStruct.new(name: "PhlexUI::Sheet", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/sheet.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Sheet::Trigger", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/sheet/trigger.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Sheet::Content", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/sheet/content.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Sheet::Header", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/sheet/header.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Sheet::Title", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/sheet/title.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Sheet::Description", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/sheet/description.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Sheet::Middle", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/sheet/middle.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Sheet::Footer", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/sheet/footer.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Sheet", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/sheet.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "SheetTrigger", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/sheet/trigger.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "SheetContent", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/sheet/content.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "SheetHeader", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/sheet/header.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "SheetTitle", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/sheet/title.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "SheetDescription", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/sheet/description.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "SheetMiddle", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/sheet/middle.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "SheetFooter", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/sheet/footer.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/docs/shortcut_key_view.rb b/app/views/docs/shortcut_key_view.rb
index 168097f..e94e645 100644
--- a/app/views/docs/shortcut_key_view.rb
+++ b/app/views/docs/shortcut_key_view.rb
@@ -5,12 +5,12 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Shortcut Key", description: "A component for displaying keyboard shortcuts.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Example", context: self) do
         <<~RUBY
           div(class: "flex flex-col items-center gap-y-4") do
-            render PhlexUI::ShortcutKey.new do
+            ShortcutKey do
               span(class: "text-xs") { "⌘" }
               plain "K"
             end
@@ -27,7 +27,7 @@ def view_template
 
   def components
     [
-      Docs::ComponentStruct.new(name: "PhlexUI::ShortcutKey", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/shortcut_key.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "ShortcutKey", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/shortcut_key.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/docs/table_view.rb b/app/views/docs/table_view.rb
index 0e994a5..a2ff26d 100644
--- a/app/views/docs/table_view.rb
+++ b/app/views/docs/table_view.rb
@@ -8,70 +8,34 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-8") do
       render Docs::Header.new(title: "Table", description: "A responsive table component.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Without builder", context: self) do
         <<~RUBY
-          render PhlexUI::Table.new do
-            render PhlexUI::Table::Caption.new { "Employees at Acme inc." }
-            render PhlexUI::Table::Header.new do
-              render PhlexUI::Table::Row.new do
-                render PhlexUI::Table::Head.new { "Name" }
-                render PhlexUI::Table::Head.new { "Email" }
-                render PhlexUI::Table::Head.new { "Status" }
-                render PhlexUI::Table::Head.new(class: "text-right") { "Role" }
+          Table do
+            TableCaption { "Employees at Acme inc." }
+            TableHeader do
+              TableRow do
+                TableHead { "Name" }
+                TableHead { "Email" }
+                TableHead { "Status" }
+                TableHead(class: "text-right") { "Role" }
               end
             end
-            render PhlexUI::Table::Body.new do
+            TableBody do
               invoices.each do |invoice|
-                render PhlexUI::Table::Row.new do
-                  render PhlexUI::Table::Cell.new(class: 'font-medium') { invoice.identifier }
-                  render PhlexUI::Table::Cell.new { render_status_badge(invoice.status) }
-                  render PhlexUI::Table::Cell.new { invoice.method }
-                  render PhlexUI::Table::Cell.new(class: "text-right") { format_amount(invoice.amount) }
+                TableRow do
+                  TableCell(class: 'font-medium') { invoice.identifier }
+                  TableCell { render_status_badge(invoice.status) }
+                  TableCell { invoice.method }
+                  TableCell(class: "text-right") { format_amount(invoice.amount) }
                 end
               end
             end
-            render PhlexUI::Table::Footer.new do
-              render PhlexUI::Table::Row.new do
-                render PhlexUI::Table::Head.new(class: "font-medium", colspan: 3) { "Total" }
-                render PhlexUI::Table::Head.new(class: "font-medium text-right") { format_amount(invoices.sum(&:amount)) }
-              end
-            end
-          end
-        RUBY
-      end
-
-      render Docs::VisualCodeExample.new(title: "Table Builder", description: "Helper methods to make it easier to construct a table", context: self) do
-        <<~RUBY
-          render PhlexUI::Table::Builder.new(invoices, caption: "A list of your recent invoices.") do |t|
-            t.column("Invoice", "Total") { |invoice| span(class: 'font-medium') { invoice.identifier } }
-            t.column("Status") { |invoice| render_status_badge(invoice.status) }
-            t.column("Method", &:method)
-            t.column("Amount", format_amount(invoices.sum(&:amount)), header_attrs: { class: 'text-right'}, footer_attrs: { class: 'text-right'}) { |invoice| span(class: 'text-right block') { format_amount(invoice.amount) } }
-          end
-        RUBY
-      end
-
-      render Docs::VisualCodeExample.new(title: "Another Example", context: self) do
-        <<~RUBY
-          render PhlexUI::Table::Builder.new(users, caption: "Top contributors to Phlex") 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)
-                div do
-                  p(class: 'text-sm font-medium') { user.name }
-                  p(class: 'text-sm text-gray-500') { user.username }
-                end
-              end
-            end
-            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
-                  github_icon
-                  span(class: 'ml-2') { "See profile" }
-                end
+            TableFooter do
+              TableRow do
+                TableHead(class: "font-medium", colspan: 3) { "Total" }
+                TableHead(class: "font-medium text-right") { format_amount(invoices.sum(&:amount)) }
               end
             end
           end
@@ -86,15 +50,14 @@ def view_template
 
   def components
     [
-      Docs::ComponentStruct.new(name: "PhlexUI::Table", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/table.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Table::Caption", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/table/caption.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Table::Header", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/table/header.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Table::Body", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/table/body.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Table::Footer", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/table/footer.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Table::Row", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/table/row.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Table::Head", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/table/head.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Table::Cell", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/table/cell.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Table::Builder", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/table/builder.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Table", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/table.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TableCaption", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/table/caption.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TableHeader", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/table/header.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TableBody", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/table/body.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TableFooter", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/table/footer.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TableRow", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/table/row.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TableHead", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/table/head.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TableCell", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/table/cell.rb", built_using: :phlex)
     ]
   end
 
@@ -138,11 +101,11 @@ def format_amount(amount)
   def render_status_badge(status)
     case status.downcase
     when "active"
-      render PhlexUI::Badge.new(variant: :success, size: :sm) { status }
+      Badge(variant: :success, size: :sm) { status }
     when "inactive"
-      render PhlexUI::Badge.new(variant: :destructive, size: :sm) { status }
+      Badge(variant: :destructive, size: :sm) { status }
     when "pending"
-      render PhlexUI::Badge.new(variant: :warning, size: :sm) { status }
+      Badge(variant: :warning, size: :sm) { status }
     end
   end
 end
diff --git a/app/views/docs/tabs_view.rb b/app/views/docs/tabs_view.rb
index 5f9a321..ffaee46 100644
--- a/app/views/docs/tabs_view.rb
+++ b/app/views/docs/tabs_view.rb
@@ -7,38 +7,28 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Tabs", description: "A set of layered sections of content—known as tab panels—that are displayed one at a time.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Example", context: self) do
         <<~RUBY
-          render PhlexUI::Tabs.new(default_value: "account", class: 'w-96') do
-            render PhlexUI::Tabs::List.new do
-              render PhlexUI::Tabs::Trigger.new(value: "account") { "Account" }
-              render PhlexUI::Tabs::Trigger.new(value: "password") { "Password" }
+          Tabs(default_value: "account", class: 'w-96') do
+            TabsList do
+              TabsTrigger(value: "account") { "Account" }
+              TabsTrigger(value: "password") { "Password" }
             end
-            render PhlexUI::Tabs::Content.new(value: "account") do
+            TabsContent(value: "account") do
               div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do
                 div(class: "space-y-0") do
-                  render PhlexUI::Typography::Large.new { "Account" }
-                  render PhlexUI::Typography::Muted.new { "Update your account details." }
-                end
-                render PhlexUI::Form::Builder.new(class: 'w-full max-w-sm') do |f|
-                  f.input "name", type: :string, value: "Joel Drapper"
-                  f.input "username", type: :email, value: "@joeldrapper"
-                  f.button { "Save changes" }
+                  TypographyLarge { "Account" }
+                  TypographyMuted { "Update your account details." }
                 end
               end
             end
-            render PhlexUI::Tabs::Content.new(value: "password") do
+            TabsContent(value: "password") do
               div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do
                 div do
-                  render PhlexUI::Typography::Large.new { "Password" }
-                  render PhlexUI::Typography::Muted.new { "Change your password here. After saving, you'll be logged out." }
-                end
-                render PhlexUI::Form::Builder.new(class: 'w-full max-w-sm') do |f|
-                  f.input "current", type: :string, label: "Current password"
-                  f.input "new", type: :email, label: "New password"
-                  f.button { "Save password" }
+                  TypographyLarge { "Password" }
+                  TypographyMuted { "Change your password here. After saving, you'll be logged out." }
                 end
               end
             end
@@ -48,53 +38,40 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "Full width", context: self) do
         <<~RUBY
-          render PhlexUI::Tabs.new(default_value: "overview", class: 'w-96') do
-            render PhlexUI::Tabs::List.new(class: 'w-full grid grid-cols-2') do
-              render PhlexUI::Tabs::Trigger.new(value: "overview") do
+          Tabs(default_value: "overview", class: 'w-96') do
+            TabsList(class: 'w-full grid grid-cols-2') do
+              TabsTrigger(value: "overview") do
                 book_icon
                 span(class: 'ml-2') { "Overview" }
               end
-              render PhlexUI::Tabs::Trigger.new(value: "repositories") do
+              TabsTrigger(value: "repositories") do
                 repo_icon
                 span(class: 'ml-2') { "Repositories" }
               end
             end
-            render PhlexUI::Tabs::Content.new(value: "overview") do
+            TabsContent(value: "overview") do
               div(class: "rounded-lg border p-6 bg-background text-foreground flex justify-between space-x-4") do
-                render PhlexUI::Avatar.new do
-                  render PhlexUI::Avatar::Image.new(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
-                  render PhlexUI::Avatar::Fallback.new { "JD" }
+                Avatar do
+                  AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
+                  AvatarFallback { "JD" }
                 end
                 div(class: "space-y-4") do
                   div do
-                    render PhlexUI::Typography::Large.new { "Joel Drapper" }
-                    render PhlexUI::Typography::Muted.new { "Creator of Phlex Components. Ruby on Rails developer." }
+                    TypographyLarge { "Joel Drapper" }
+                    TypographyMuted { "Creator of Phlex Components. Ruby on Rails developer." }
                   end
-                  render PhlexUI::Link.new(href: "https://github.com/joeldrapper", variant: :outline, size: :sm) do
+                  Link(href: "https://github.com/joeldrapper", variant: :outline, size: :sm) do
                     github_icon
                     span(class: 'ml-2') { "View profile" }
                   end
                 end
               end
             end
-            render PhlexUI::Tabs::Content.new(value: "repositories") do
+            TabsContent(value: "repositories") do
               div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do
-                render PhlexUI::Table::Builder.new(repositories) do |t|
-                  t.column("Name") do |repo|
-                    render PhlexUI::Link.new(href: repo.github_url, variant: :link, class: "pl-0") { repo.name }
-                  end
-                  t.column("Stars") do |repo|
-                    div(class: 'flex items-center space-x-2') do
-                      star_icon
-                      span(class: "ml-2") { repo.stars }
-                    end
-                  end
-                  t.column("Version", header_attrs: { class: "text-right w-full" }) do |repo|
-                    div(class: 'flex justify-end') do
-                      render PhlexUI::Badge.new { repo.version }
-                    end
-                  end
-                end
+                repo = repositories.first
+                Link(href: repo.github_url, variant: :link, class: "pl-0") { repo.name }
+                Badge { repo.version }
               end
             end
           end
@@ -103,34 +80,24 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "Change default value", context: self) do
         <<~RUBY
-          render PhlexUI::Tabs.new(default: "password", class: 'w-96') do
-            render PhlexUI::Tabs::List.new do
-              render PhlexUI::Tabs::Trigger.new(value: "account") { "Account" }
-              render PhlexUI::Tabs::Trigger.new(value: "password") { "Password" }
+          Tabs(default: "password", class: 'w-96') do
+            TabsList do
+              TabsTrigger(value: "account") { "Account" }
+              TabsTrigger(value: "password") { "Password" }
             end
-            render PhlexUI::Tabs::Content.new(value: "account") do
+            TabsContent(value: "account") do
               div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do
                 div(class: "space-y-0") do
-                  render PhlexUI::Typography::Large.new { "Account" }
-                  render PhlexUI::Typography::Muted.new { "Update your account details." }
-                end
-                render PhlexUI::Form::Builder.new(class: 'w-full max-w-sm') do |f|
-                  f.input "name", type: :string, value: "Joel Drapper"
-                  f.input "username", type: :email, value: "@joeldrapper"
-                  f.button { "Save changes" }
+                  TypographyLarge { "Account" }
+                  TypographyMuted { "Update your account details." }
                 end
               end
             end
-            render PhlexUI::Tabs::Content.new(value: "password") do
+            TabsContent(value: "password") do
               div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do
                 div do
-                  render PhlexUI::Typography::Large.new { "Password" }
-                  render PhlexUI::Typography::Muted.new { "Change your password here. After saving, you'll be logged out." }
-                end
-                render PhlexUI::Form::Builder.new(class: 'w-full max-w-sm') do |f|
-                  f.input "current", type: :string, label: "Current password"
-                  f.input "new", type: :email, label: "New password"
-                  f.button { "Save password" }
+                  TypographyLarge { "Password" }
+                  TypographyMuted { "Change your password here. After saving, you'll be logged out." }
                 end
               end
             end
@@ -147,10 +114,10 @@ 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: "PhlexUI::Tabs", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tabs.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Tabs::List", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tabs/list.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Tabs::Trigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tabs/trigger.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Tabs::Content", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tabs/content.rb", built_using: :phlex)
+      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)
     ]
   end
 
diff --git a/app/views/docs/theme_toggle_view.rb b/app/views/docs/theme_toggle_view.rb
index 382642c..13a0032 100644
--- a/app/views/docs/theme_toggle_view.rb
+++ b/app/views/docs/theme_toggle_view.rb
@@ -5,13 +5,13 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Theme Toggle", description: "Toggle between dark/light theme.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "With icon", context: self) do
         <<~RUBY
-          render PhlexUI::ThemeToggle.new do |toggle|
+          ThemeToggle do |toggle|
             toggle.light_mode do
-              render PhlexUI::Button.new(variant: :ghost, icon: true) do
+              Button(variant: :ghost, icon: true) do
                 svg(
                   xmlns: "http://www.w3.org/2000/svg",
                   viewbox: "0 0 24 24",
@@ -27,7 +27,7 @@ def view_template
             end
 
             toggle.dark_mode do
-              render PhlexUI::Button.new(variant: :ghost, icon: true) do
+              Button(variant: :ghost, icon: true) do
                 svg(
                   xmlns: "http://www.w3.org/2000/svg",
                   viewbox: "0 0 24 24",
@@ -49,13 +49,13 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "With text", context: self) do
         <<~RUBY
-          render PhlexUI::ThemeToggle.new do |toggle|
+          ThemeToggle do |toggle|
             toggle.light_mode do
-              render PhlexUI::Button.new(variant: :primary) { "Light" }
+              Button(variant: :primary) { "Light" }
             end
 
             toggle.dark_mode do
-              render PhlexUI::Button.new(variant: :primary) { "Dark" }
+              Button(variant: :primary) { "Dark" }
             end
           end
         RUBY
@@ -70,7 +70,7 @@ def view_template
   def components
     [
       Docs::ComponentStruct.new(name: "ToggleThemeController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/toggle_theme_controller.js", built_using: :stimulus),
-      Docs::ComponentStruct.new(name: "PhlexUI::ThemeToggle", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/theme_toggle.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "ThemeToggle", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/theme_toggle.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/docs/tooltip_view.rb b/app/views/docs/tooltip_view.rb
index a1f3343..6679c27 100644
--- a/app/views/docs/tooltip_view.rb
+++ b/app/views/docs/tooltip_view.rb
@@ -5,18 +5,18 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Tooltip", description: "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Example", context: self) do
         <<~RUBY
-          render PhlexUI::Tooltip.new do
-            render PhlexUI::Tooltip::Trigger.new do
-              render PhlexUI::Button.new(variant: :outline, icon: true) do
+          Tooltip do
+            TooltipTrigger do
+              Button(variant: :outline, icon: true) do
                 bookmark_icon
               end
             end
-            render PhlexUI::Tooltip::Content.new do
-              render PhlexUI::Typography::P.new { "Add to library" }
+            TooltipContent do
+              TypographyP { "Add to library" }
             end
           end
         RUBY
@@ -31,9 +31,9 @@ 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: "PhlexUI::Tooltip", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tooltip.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Tooltip::Trigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tooltip/trigger.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Tooltip::Content", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tooltip/content.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Tooltip", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tooltip.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TooltipTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tooltip/trigger.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TooltipContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tooltip/content.rb", built_using: :phlex)
     ]
   end
 
diff --git a/app/views/docs/typography_view.rb b/app/views/docs/typography_view.rb
index a98e481..26ba3f3 100644
--- a/app/views/docs/typography_view.rb
+++ b/app/views/docs/typography_view.rb
@@ -5,43 +5,43 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Typography", description: "Sensible defaults to use for text.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "h1", context: self) do
         <<~RUBY
-          render PhlexUI::Typography::H1.new { "This is an H1 title" }
+          TypographyH1 { "This is an H1 title" }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "h2", context: self) do
         <<~RUBY
-          render PhlexUI::Typography::H2.new { "This is an H2 title" }
+          TypographyH2 { "This is an H2 title" }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "h3", context: self) do
         <<~RUBY
-          render PhlexUI::Typography::H3.new { "This is an H3 title" }
+          TypographyH3 { "This is an H3 title" }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "h4", context: self) do
         <<~RUBY
-          render PhlexUI::Typography::H4.new { "This is an H4 title" }
+          TypographyH4 { "This is an H4 title" }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "p", context: self) do
         <<~RUBY
-          render PhlexUI::Typography::P.new { "This is an P tag" }
+          TypographyP { "This is an P tag" }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Inline Link", context: self) do
         <<~RUBY
-          render PhlexUI::Typography::P.new(class: 'text-center') do
+          TypographyP(class: 'text-center') do
             plain "Checkout our "
-            render PhlexUI::Typography::InlineLink.new(href: helpers.docs_installation_path) { "installation instructions" }
+            TypographyInlineLink(href: helpers.docs_installation_path) { "installation instructions" }
             plain " to get started."
           end
         RUBY
@@ -49,7 +49,7 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "List", context: self) do
         <<~RUBY
-          render PhlexUI::Typography::List.new(items: [
+          TypographyList(items: [
             'Phlex is fast',
             'Phlex is easy to use',
             'Phlex is awesome',
@@ -59,7 +59,7 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "Numbered List", context: self) do
         <<~RUBY
-          render PhlexUI::Typography::List.new(items: [
+          TypographyList(items: [
             'Copy',
             'Paste',
             'Customize',
@@ -69,31 +69,31 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "Inline Code", context: self) do
         <<~RUBY
-          render PhlexUI::Typography::InlineCode.new { "This is an inline code block" }
+          TypographyInlineCode { "This is an inline code block" }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Lead", context: self) do
         <<~RUBY
-          render PhlexUI::Typography::Lead.new { "A modal dialog that interrupts the user with important content and expects a response." }
+          TypographyLead { "A modal dialog that interrupts the user with important content and expects a response." }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Large", context: self) do
         <<~RUBY
-          render PhlexUI::Typography::Large.new { "Are you sure absolutely sure?" }
+          TypographyLarge { "Are you sure absolutely sure?" }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Small", context: self) do
         <<~RUBY
-          render PhlexUI::Typography::Small.new { "Email address" }
+          TypographySmall { "Email address" }
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Muted", context: self) do
         <<~RUBY
-          render PhlexUI::Typography::Muted.new { "Enter your email address." }
+          TypographyMuted { "Enter your email address." }
         RUBY
       end
 
@@ -105,19 +105,19 @@ def view_template
 
   def components
     [
-      Docs::ComponentStruct.new(name: "PhlexUI::Typography::H1", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/h1.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Typography::H2", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/h2.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Typography::H3", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/h3.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Typography::H4", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/h4.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Typography::P", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/p.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Typography::InlineLink", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/inline_link.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Typography::List", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/list.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Typography::ListItem", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/list_item.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Typography::InlineCode", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/inline_code.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Typography::Lead", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/lead.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Typography::Large", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/large.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Typography::Small", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/small.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Typography::Muted", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/muted.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "TypographyH1", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/h1.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TypographyH2", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/h2.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TypographyH3", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/h3.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TypographyH4", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/h4.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TypographyP", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/p.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TypographyInlineLink", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/inline_link.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TypographyList", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/list.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TypographyListItem", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/list_item.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TypographyInlineCode", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/inline_code.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TypographyLead", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/lead.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TypographyLarge", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/large.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TypographySmall", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/small.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "TypographyMuted", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/typography/muted.rb", built_using: :phlex)
     ]
   end
 end
diff --git a/app/views/errors/internal_server_error_view.rb b/app/views/errors/internal_server_error_view.rb
index f8108aa..4bf53eb 100644
--- a/app/views/errors/internal_server_error_view.rb
+++ b/app/views/errors/internal_server_error_view.rb
@@ -2,14 +2,14 @@
 
 class Errors::InternalServerErrorView < ApplicationView
   def view_template
-    render PhlexUI::Card.new(class: "p-8 space-y-6 flex flex-col items-center") do
+    Card(class: "p-8 space-y-6 flex flex-col items-center") do
       div(class: "space-y-2") do
-        render PhlexUI::Badge.new(variant: :destructive, class: "font-mono") { "STATUS: 500" }
-        render PhlexUI::Typography::H1.new(class: "!leading-tight") { "Oops! Something went wrong" }
-        render PhlexUI::Typography::P.new(class: "text-muted-foreground") { "Something unexpected happened. We're looking into it." }
+        Badge(variant: :destructive, class: "font-mono") { "STATUS: 500" }
+        TypographyH1(class: "!leading-tight") { "Oops! Something went wrong" }
+        TypographyP(class: "text-muted-foreground") { "Something unexpected happened. We're looking into it." }
       end
 
-      render PhlexUI::Link.new(href: helpers.root_path, variant: :primary, class: "w-full") do
+      Link(href: helpers.root_path, variant: :primary, class: "w-full") do
         house_icon
         plain "Go to home"
       end
diff --git a/app/views/errors/not_found_view.rb b/app/views/errors/not_found_view.rb
index fe575d2..1057cb9 100644
--- a/app/views/errors/not_found_view.rb
+++ b/app/views/errors/not_found_view.rb
@@ -2,14 +2,14 @@
 
 class Errors::NotFoundView < ApplicationView
   def view_template
-    render PhlexUI::Card.new(class: "p-8 space-y-6 flex flex-col items-center") do
+    Card(class: "p-8 space-y-6 flex flex-col items-center") do
       div(class: "space-y-2") do
-        render PhlexUI::Badge.new(variant: :purple, class: "font-mono") { "STATUS: 404" }
-        render PhlexUI::Typography::H1.new(class: "!leading-tight") { "Oops! Page not found" }
-        render PhlexUI::Typography::P.new(class: "text-muted-foreground") { "The page you were looking for doesn't exist." }
+        Badge(variant: :purple, class: "font-mono") { "STATUS: 404" }
+        TypographyH1(class: "!leading-tight") { "Oops! Page not found" }
+        TypographyP(class: "text-muted-foreground") { "The page you were looking for doesn't exist." }
       end
 
-      render PhlexUI::Link.new(href: helpers.root_path, variant: :primary, class: "w-full") do
+      Link(href: helpers.root_path, variant: :primary, class: "w-full") do
         house_icon
         plain "Go to home"
       end
diff --git a/app/views/pages/home_view.rb b/app/views/pages/home_view.rb
index a547881..760a26a 100644
--- a/app/views/pages/home_view.rb
+++ b/app/views/pages/home_view.rb
@@ -4,8 +4,8 @@ class Pages::HomeView < ApplicationView
   def view_template
     render HomeView::Banner.new do |banner|
       banner.cta do
-        render PhlexUI::Link.new(variant: :outline, href: helpers.docs_accordion_path, class: "text-center justify-center") { "Browse Components" }
-        render PhlexUI::Link.new(variant: :primary, href: helpers.docs_introduction_path, class: "text-center justify-center") do
+        Link(variant: :outline, href: helpers.docs_accordion_path, class: "text-center justify-center") { "Browse Components" }
+        Link(variant: :primary, href: helpers.docs_introduction_path, class: "text-center justify-center") do
           plain "Get Started"
           svg(
             xmlns: "http://www.w3.org/2000/svg",
diff --git a/app/views/themes/copy_code.rb b/app/views/themes/copy_code.rb
index c67755b..74250e8 100644
--- a/app/views/themes/copy_code.rb
+++ b/app/views/themes/copy_code.rb
@@ -10,17 +10,17 @@ def view_template
       style do
         Theme::CSS.retrieve(@theme, with_directive: false)
       end
-      render PhlexUI::Sheet.new do
-        render PhlexUI::Sheet::Trigger.new do
-          render PhlexUI::Button.new(variant: :primary) { "Copy Code" }
+      Sheet do
+        SheetTrigger do
+          Button(variant: :primary) { "Copy Code" }
         end
-        render PhlexUI::Sheet::Content.new(class: "sm:max-w-md w-screen flex flex-col h-screen overflow-y-scroll") do
-          render PhlexUI::Sheet::Header.new do
-            render PhlexUI::Sheet::Title.new { "Theme" }
-            render PhlexUI::Sheet::Description.new { "Copy and paste the following code into your CSS file." }
+        SheetContent(class: "sm:max-w-md w-screen flex flex-col h-screen overflow-y-scroll") do
+          SheetHeader do
+            SheetTitle { "Theme" }
+            SheetDescription { "Copy and paste the following code into your CSS file." }
           end
-          render PhlexUI::Sheet::Middle.new(class: "flex-1 relative") do
-            render PhlexUI::Codeblock.new(Theme::CSS.retrieve(@theme, with_directive: true), syntax: :css, class: "h-full max-h-none")
+          SheetMiddle(class: "flex-1 relative") do
+            Codeblock(Theme::CSS.retrieve(@theme, with_directive: true), syntax: :css, class: "h-full max-h-none")
           end
         end
       end
diff --git a/app/views/themes/customize_popover.rb b/app/views/themes/customize_popover.rb
index d95f2c5..e57dffd 100644
--- a/app/views/themes/customize_popover.rb
+++ b/app/views/themes/customize_popover.rb
@@ -7,17 +7,17 @@ def initialize(theme:)
     end
 
     def view_template
-      render PhlexUI::Popover.new(options: {trigger: "click", placement: "bottom-end"}) do
-        render PhlexUI::Popover::Trigger.new do
-          render PhlexUI::Button.new(variant: :outline) do
+      Popover(options: {trigger: "click", placement: "bottom-end"}) do
+        PopoverTrigger do
+          Button(variant: :outline) do
             color_swatch_icon
             plain "Customize Theme"
           end
         end
-        render PhlexUI::Popover::Content.new(class: "w-96 p-6") do
+        PopoverContent(class: "w-96 p-6") do
           div(class: "space-y-0") do
-            render PhlexUI::Typography::Large.new { "Customize" }
-            render PhlexUI::Typography::P.new(class: "text-muted-foreground") { "Choose how your app looks" }
+            TypographyLarge { "Customize" }
+            TypographyP(class: "text-muted-foreground") { "Choose how your app looks" }
           end
           div(class: "grid grid-cols-3 gap-2 mt-4") do
             Theme::CSS.all_themes.each do |name, color_hash|
@@ -31,7 +31,7 @@ def view_template
     private
 
     def render_color_picker(name, color_hash, selected: false)
-      render PhlexUI::Link.new(href: helpers.theme_path(name&.downcase), variant: :outline, class: tokens("!justify-start", -> { selected } => "ring-neutral-950 ring-1")) do
+      Link(href: helpers.theme_path(name&.downcase), variant: :outline, class: tokens("!justify-start", -> { selected } => "ring-neutral-950 ring-1")) do
         div(class: "w-4 h-4 rounded-full shrink-0 mr-2 ring-white dark:hidden", style: "background-color: hsl(#{color_hash[:root][:primary].split.join(",")})") do
         end
         div(class: "w-4 h-4 rounded-full shrink-0 mr-2 ring-white hidden dark:block", style: "background-color: hsl(#{color_hash[:dark][:primary].split.join(",")})") do
diff --git a/app/views/themes/grid/calendar.rb b/app/views/themes/grid/calendar.rb
index d61556a..d80b503 100644
--- a/app/views/themes/grid/calendar.rb
+++ b/app/views/themes/grid/calendar.rb
@@ -3,8 +3,8 @@ module Grid
     class Calendar < ApplicationComponent
       def view_template
         div(class: "space-y-4 w-full") do
-          render PhlexUI::Input.new(type: "string", placeholder: "Select a date", class: "rounded-md border shadow", id: "formatted-date", data_controller: "input")
-          render PhlexUI::Calendar.new(input_id: "#formatted-date", date_format: "PPPP", class: "rounded-md border shadow")
+          Input(type: "string", placeholder: "Select a date", class: "rounded-md border shadow", id: "formatted-date", data_controller: "input")
+          Calendar(input_id: "#formatted-date", date_format: "PPPP", class: "rounded-md border shadow")
         end
       end
     end
diff --git a/app/views/themes/grid/card.rb b/app/views/themes/grid/card.rb
index 5eb4c28..8c5a54c 100644
--- a/app/views/themes/grid/card.rb
+++ b/app/views/themes/grid/card.rb
@@ -2,13 +2,13 @@ module Themes
   module Grid
     class Card < ApplicationComponent
       def view_template
-        render PhlexUI::Card.new(class: "w-full") do
-          render PhlexUI::Card::Header.new do
-            render PhlexUI::Card::Title.new { 'You might like "PhlexUI"' }
-            render PhlexUI::Card::Description.new { "@joeldrapper" }
+        Card(class: "w-full") do
+          CardHeader do
+            CardTitle { 'You might like "PhlexUI"' }
+            CardDescription { "@joeldrapper" }
           end
-          render PhlexUI::Card::Content.new do
-            render PhlexUI::AspectRatio.new(aspect_ratio: "16/9", class: "rounded-md overflow-hidden border") do
+          CardContent do
+            AspectRatio(aspect_ratio: "16/9", class: "rounded-md overflow-hidden border") do
               img(
                 alt: "Placeholder",
                 loading: "lazy",
@@ -17,9 +17,9 @@ def view_template
               )
             end
           end
-          render PhlexUI::Card::Footer.new(class: "flex justify-end gap-x-2") do
-            render PhlexUI::Button.new(variant: :outline) { "See more" }
-            render PhlexUI::Button.new(variant: :primary) { "Buy now" }
+          CardFooter(class: "flex justify-end gap-x-2") do
+            Button(variant: :outline) { "See more" }
+            Button(variant: :primary) { "Buy now" }
           end
         end
       end
diff --git a/app/views/themes/grid/chart.rb b/app/views/themes/grid/chart.rb
index e6c9c79..aaead96 100644
--- a/app/views/themes/grid/chart.rb
+++ b/app/views/themes/grid/chart.rb
@@ -4,12 +4,12 @@ module Themes
   module Grid
     class Chart < ApplicationComponent
       def view_template
-        render PhlexUI::Card.new(class: "p-8 space-y-6") do
+        Card(class: "p-8 space-y-6") do
           div do
-            render PhlexUI::Typography::Large.new { "Phlex Speed Tests" }
-            render PhlexUI::Typography::Muted.new { "Render time for a simple page" }
+            TypographyLarge { "Phlex Speed Tests" }
+            TypographyMuted { "Render time for a simple page" }
           end
-          render PhlexUI::Chart.new(options: chart_options)
+          Chart(options: chart_options)
         end
       end
 
diff --git a/app/views/themes/grid/chat.rb b/app/views/themes/grid/chat.rb
index 5dd547f..ef9401c 100644
--- a/app/views/themes/grid/chat.rb
+++ b/app/views/themes/grid/chat.rb
@@ -11,7 +11,7 @@ class Chat < ApplicationComponent
       ]
 
       def view_template
-        render PhlexUI::Card.new(class: "p-8 space-y-6") do
+        Card(class: "p-8 space-y-6") do
           header
           messages(MESSAGES)
           message_form
@@ -23,20 +23,20 @@ def view_template
       def header
         div(class: "flex items-center justify-between") do
           div(class: "flex items-center space-x-4") do
-            render PhlexUI::Avatar::Builder.new(src: "https://avatars.githubusercontent.com/u/246692?v=4")
+            # render PhlexUI::Avatar::Builder.new(src: "https://avatars.githubusercontent.com/u/246692?v=4")
             div do
-              render PhlexUI::Typography::P.new(class: "font-medium") { "Joel Drapper" }
-              render PhlexUI::Typography::Muted.new { "joel@drapper.me" }
+              TypographyP(class: "font-medium") { "Joel Drapper" }
+              TypographyMuted { "joel@drapper.me" }
             end
           end
-          render PhlexUI::Tooltip.new do
-            render PhlexUI::Tooltip::Trigger.new do
-              render PhlexUI::Button.new(variant: :outline, icon: true) do
+          Tooltip do
+            TooltipTrigger do
+              Button(variant: :outline, icon: true) do
                 bookmark_icon
               end
             end
-            render PhlexUI::Tooltip::Content.new do
-              render PhlexUI::Typography::P.new { "Save contact" }
+            TooltipContent do
+              TypographyP { "Save contact" }
             end
           end
 
@@ -69,8 +69,8 @@ def message(content, right: false)
 
       def message_form
         div(class: "flex w-full items-center space-x-2") do
-          render PhlexUI::Input.new(type: "message", placeholder: "Write something...")
-          render PhlexUI::Button.new { "Send" }
+          Input(type: "message", placeholder: "Write something...")
+          Button { "Send" }
         end
       end
 
diff --git a/app/views/themes/grid/command.rb b/app/views/themes/grid/command.rb
index 0bcce0d..8281515 100644
--- a/app/views/themes/grid/command.rb
+++ b/app/views/themes/grid/command.rb
@@ -4,37 +4,37 @@ module Themes
   module Grid
     class Command < ApplicationComponent
       def view_template
-        render PhlexUI::Command::Dialog.new do
-          render PhlexUI::Command::DialogTrigger.new do
-            render PhlexUI::Button.new(variant: "outline", class: "w-full pr-2 pl-3 justify-between") do
+        CommandDialog do
+          CommandDialogTrigger do
+            Button(variant: "outline", class: "w-full pr-2 pl-3 justify-between") do
               div(class: "flex items-center space-x-1") do
                 search_icon
                 span(class: "text-muted-foreground font-normal") do
                   plain "Search"
                 end
               end
-              render PhlexUI::ShortcutKey.new do
+              ShortcutKey do
                 span(class: "text-xs") { "⌘" }
                 plain "K"
               end
             end
           end
-          render PhlexUI::Command::DialogContent.new do
-            render PhlexUI::Command.new do
-              render PhlexUI::Command::Input.new(placeholder: "Type a command or search...")
-              render PhlexUI::Command::Empty.new { "No results found." }
-              render PhlexUI::Command::List.new do
-                render PhlexUI::Command::Group.new(title: "Components") do
+          CommandDialogContent do
+            Command do
+              CommandInput(placeholder: "Type a command or search...")
+              CommandEmpty { "No results found." }
+              CommandList do
+                CommandGroup(title: "Components") do
                   components_list.each do |component|
-                    render PhlexUI::Command::Item.new(value: component[:name], href: component[:path]) do
+                    CommandItem(value: component[:name], href: component[:path]) do
                       default_icon
                       plain component[:name]
                     end
                   end
                 end
-                render PhlexUI::Command::Group.new(title: "Settings") do
+                CommandGroup(title: "Settings") do
                   settings_list.each do |setting|
-                    render PhlexUI::Command::Item.new(value: setting[:name], href: setting[:path]) do
+                    CommandItem(value: setting[:name], href: setting[:path]) do
                       default_icon
                       plain setting[:name]
                     end
@@ -51,15 +51,15 @@ 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: "PhlexUI::Command::Dialog", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/dialog.rb", built_using: :phlex),
-          Docs::ComponentStruct.new(name: "PhlexUI::Command::DialogTrigger", 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: "PhlexUI::Command::DialogContent", 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: "PhlexUI::Command", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command.rb", built_using: :phlex),
-          Docs::ComponentStruct.new(name: "PhlexUI::Command::Input", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/input.rb", built_using: :phlex),
-          Docs::ComponentStruct.new(name: "PhlexUI::Command::Empty", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/empty.rb", built_using: :phlex),
-          Docs::ComponentStruct.new(name: "PhlexUI::Command::List", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/list.rb", built_using: :phlex),
-          Docs::ComponentStruct.new(name: "PhlexUI::Command::Group", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/group.rb", built_using: :phlex),
-          Docs::ComponentStruct.new(name: "PhlexUI::Command::Item", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/item.rb", built_using: :phlex)
+          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)
         ]
       end
 
diff --git a/app/views/themes/grid/create_event.rb b/app/views/themes/grid/create_event.rb
index f0ed828..51c75f9 100644
--- a/app/views/themes/grid/create_event.rb
+++ b/app/views/themes/grid/create_event.rb
@@ -4,10 +4,10 @@ module Themes
   module Grid
     class CreateEvent < ApplicationComponent
       def view_template
-        render PhlexUI::Card.new(class: "p-8 space-y-4") do
+        Card(class: "p-8 space-y-4") do
           div do
-            render PhlexUI::Typography::Large.new { "Create an Event" }
-            render PhlexUI::Typography::Muted.new { "Enter your event details below" }
+            TypographyLarge { "Create an Event" }
+            TypographyMuted { "Enter your event details below" }
           end
           event_form
         end
@@ -16,26 +16,26 @@ def view_template
       private
 
       def event_form
-        render PhlexUI::Form.new(class: "w-full") do
-          render PhlexUI::Form::Spacer.new do
-            render PhlexUI::Form::Item.new do
-              render PhlexUI::Label.new(for: "name") { "Name" }
-              render PhlexUI::Input.new(type: "string", value: "RuSki conf. Japan", id: "name")
+        Form(class: "w-full") do
+          FormSpacer do
+            FormItem do
+              Label(for: "name") { "Name" }
+              Input(type: "string", value: "RuSki conf. Japan", id: "name")
             end
-            render PhlexUI::Form::Item.new do
-              render PhlexUI::Popover.new(options: {trigger: "focusin"}) do
-                render PhlexUI::Popover::Trigger.new(class: "w-full") do
+            FormItem do
+              Popover(options: {trigger: "focusin"}) do
+                PopoverTrigger(class: "w-full") do
                   div(class: "grid w-full max-w-sm items-center gap-1.5") do
-                    render PhlexUI::Label.new(for: "date") { "Select a date" }
-                    render PhlexUI::Input.new(type: "string", placeholder: "Select a date", class: "rounded-md border shadow", id: "date", data_controller: "input")
+                    Label(for: "date") { "Select a date" }
+                    Input(type: "string", placeholder: "Select a date", class: "rounded-md border shadow", id: "date", data_controller: "input")
                   end
                 end
-                render PhlexUI::Popover::Content.new do
-                  render PhlexUI::Calendar.new(input_id: "#date")
+                PopoverContent do
+                  Calendar(input_id: "#date")
                 end
               end
             end
-            render PhlexUI::Button.new(type: "submit", class: "w-full") { "Create Event" }
+            Button(type: "submit", class: "w-full") { "Create Event" }
           end
         end
       end
diff --git a/app/views/themes/grid/line_graph.rb b/app/views/themes/grid/line_graph.rb
index cd31d87..cda5331 100644
--- a/app/views/themes/grid/line_graph.rb
+++ b/app/views/themes/grid/line_graph.rb
@@ -4,12 +4,12 @@ module Themes
   module Grid
     class LineGraph < ApplicationComponent
       def view_template
-        render PhlexUI::Card.new(class: "p-8 space-y-6") do
+        Card(class: "p-8 space-y-6") do
           div do
-            render PhlexUI::Typography::Large.new { "Phlex Success" }
-            render PhlexUI::Typography::Muted.new { "Number of stars on the Phlex Github repo" }
+            TypographyLarge { "Phlex Success" }
+            TypographyMuted { "Number of stars on the Phlex Github repo" }
           end
-          render PhlexUI::Chart.new(options: chart_options)
+          Chart(options: chart_options)
         end
       end
 
diff --git a/app/views/themes/grid/repo_tabs.rb b/app/views/themes/grid/repo_tabs.rb
index 50dd5b0..4672eac 100644
--- a/app/views/themes/grid/repo_tabs.rb
+++ b/app/views/themes/grid/repo_tabs.rb
@@ -6,55 +6,35 @@ class RepoTabs < ApplicationComponent
       Repo = Struct.new(:github_url, :name, :stars, :version, keyword_init: true)
 
       def view_template
-        render PhlexUI::Tabs.new(default_value: "overview", class: "w-full") do
-          render PhlexUI::Tabs::List.new(class: "w-full grid grid-cols-2") do
-            render PhlexUI::Tabs::Trigger.new(value: "overview") do
+        Tabs(default_value: "overview", class: "w-full") do
+          TabsList(class: "w-full grid grid-cols-2") do
+            TabsTrigger(value: "overview") do
               book_icon
               span(class: "ml-2") { "Overview" }
             end
-            render PhlexUI::Tabs::Trigger.new(value: "repositories") do
+            TabsTrigger(value: "repositories") do
               repo_icon
               span(class: "ml-2") { "Repositories" }
             end
           end
-          render PhlexUI::Tabs::Content.new(value: "overview") do
-            render PhlexUI::Card.new(class: "p-6 space-y-4 shadow-none") do
-              render PhlexUI::Avatar.new do
-                render PhlexUI::Avatar::Image.new(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
-                render PhlexUI::Avatar::Fallback.new { "JD" }
+          TabsContent(value: "overview") do
+            Card(class: "p-6 space-y-4 shadow-none") do
+              Avatar do
+                AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
+                AvatarFallback { "JD" }
               end
               div(class: "space-y-4") do
                 div do
-                  render PhlexUI::Typography::Large.new { "Joel Drapper" }
-                  render PhlexUI::Typography::Muted.new { "Creator of Phlex Components. Ruby on Rails developer." }
+                  TypographyLarge { "Joel Drapper" }
+                  TypographyMuted { "Creator of Phlex Components. Ruby on Rails developer." }
                 end
-                render PhlexUI::Link.new(href: "https://github.com/joeldrapper", variant: :outline, size: :sm) do
+                Link(href: "https://github.com/joeldrapper", variant: :outline, size: :sm) do
                   github_icon
                   span(class: "ml-2") { "View profile" }
                 end
               end
             end
           end
-          render PhlexUI::Tabs::Content.new(value: "repositories") do
-            render PhlexUI::Card.new(class: "p-6 space-y-4 shadow-none") do
-              render PhlexUI::Table::Builder.new(repositories) do |t|
-                t.column("Name") do |repo|
-                  render PhlexUI::Link.new(href: repo.github_url, variant: :link, class: "pl-0 !text-foreground") { repo.name }
-                end
-                t.column("Stars") do |repo|
-                  div(class: "flex items-center space-x-2") do
-                    star_icon
-                    span(class: "ml-2") { repo.stars }
-                  end
-                end
-                t.column("Version", header_attrs: {class: "text-right w-full"}) do |repo|
-                  div(class: "flex justify-end") do
-                    render PhlexUI::Badge.new(variant: :outline) { repo.version }
-                  end
-                end
-              end
-            end
-          end
         end
       end
 
@@ -63,10 +43,10 @@ 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: "PhlexUI::Tabs", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tabs.rb", built_using: :phlex),
-          Docs::ComponentStruct.new(name: "PhlexUI::Tabs::List", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tabs/list.rb", built_using: :phlex),
-          Docs::ComponentStruct.new(name: "PhlexUI::Tabs::Trigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tabs/trigger.rb", built_using: :phlex),
-          Docs::ComponentStruct.new(name: "PhlexUI::Tabs::Content", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tabs/content.rb", built_using: :phlex)
+          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)
         ]
       end
 
diff --git a/app/views/themes/grid/signin.rb b/app/views/themes/grid/signin.rb
index 8e9db56..ae24b7b 100644
--- a/app/views/themes/grid/signin.rb
+++ b/app/views/themes/grid/signin.rb
@@ -4,14 +4,14 @@ module Themes
   module Grid
     class Signin < ApplicationComponent
       def view_template
-        render PhlexUI::Card.new(class: "p-8 space-y-4") do
+        Card(class: "p-8 space-y-4") do
           div do
-            render PhlexUI::Typography::Large.new { "Create an account" }
-            render PhlexUI::Typography::Muted.new { "Enter your email below to create your account" }
+            TypographyLarge { "Create an account" }
+            TypographyMuted { "Enter your email below to create your account" }
           end
           oauth_buttons
           or_continue_with
-          signin_form
+          # signin_form
         end
       end
 
@@ -20,12 +20,12 @@ def view_template
       def oauth_buttons
         div(class: "grid grid-cols-2 gap-4 mt-4") do
           # github
-          render PhlexUI::Button.new(variant: :outline, class: "w-full") do
+          Button(variant: :outline, class: "w-full") do
             github_icon
             span(class: "ml-2") { "Github" }
           end
           # google
-          render PhlexUI::Button.new(variant: :outline, class: "w-full") do
+          Button(variant: :outline, class: "w-full") do
             google_icon
             span(class: "ml-2") { "Google" }
           end
@@ -43,17 +43,17 @@ def or_continue_with
         end
       end
 
-      def signin_form
-        render PhlexUI::Form::Builder.new(class: "w-full") do |f|
-          f.input "email", type: :email, placeholder: "joel@drapper.me"
-          f.input "password", type: :password, placeholder: "**********"
-          div(class: "flex items-center space-x-3 py-2") do
-            render PhlexUI::Checkbox.new(id: "terms")
-            label(for: "terms", class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") { "Accept terms and conditions" }
-          end
-          f.button(class: "w-full") { "Create account" }
-        end
-      end
+      # def signin_form
+      #   Form::Builder.new(class: "w-full") do |f|
+      #     f.input "email", type: :email, placeholder: "joel@drapper.me"
+      #     f.input "password", type: :password, placeholder: "**********"
+      #     div(class: "flex items-center space-x-3 py-2") do
+      #       Checkbox.new(id: "terms")
+      #       label(for: "terms", class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") { "Accept terms and conditions" }
+      #     end
+      #     f.button(class: "w-full") { "Create account" }
+      #   end
+      # end
 
       def github_icon
         svg(viewbox: "0 0 438.549 438.549", class: "h-4 w-4") do |s|
diff --git a/app/views/themes/grid/table.rb b/app/views/themes/grid/table.rb
index b9d96d7..6d83b0b 100644
--- a/app/views/themes/grid/table.rb
+++ b/app/views/themes/grid/table.rb
@@ -5,30 +5,30 @@ module Grid
     class Table < ApplicationComponent
       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|
-            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)
-                div do
-                  p(class: "text-sm font-medium") { user.name }
-                  p(class: "text-sm text-gray-500") { user.username }
-                end
-              end
-            end
-            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
-                  github_icon
-                  span(class: "ml-2") { "See profile" }
-                end
-              end
-            end
-          end
-        end
-      end
+      # def view_template
+      #   render PhlexUI::Card.new(class: "p-6") do
+      #     render PhlexUI::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)
+      #           div do
+      #             p(class: "text-sm font-medium") { user.name }
+      #             p(class: "text-sm text-gray-500") { user.username }
+      #           end
+      #         end
+      #       end
+      #       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
+      #             github_icon
+      #             span(class: "ml-2") { "See profile" }
+      #           end
+      #         end
+      #       end
+      #     end
+      #   end
+      # end
 
       private
 
diff --git a/app/views/themes/show_view.rb b/app/views/themes/show_view.rb
index 333c764..e9ca063 100644
--- a/app/views/themes/show_view.rb
+++ b/app/views/themes/show_view.rb
@@ -9,8 +9,8 @@ def view_template
     render Shared::Container.new(size: "2xl", class: "py-12") do
       div(class: "md:flex items-center justify-between") do
         div do
-          render PhlexUI::Typography::H1.new { "Themes" }
-          render PhlexUI::Typography::Lead.new { "Customize your app fast with hand-picked themes." }
+          TypographyH1 { "Themes" }
+          TypographyLead { "Customize your app fast with hand-picked themes." }
         end
         div(class: "flex gap-x-2 mt-4") do
           render Themes::CustomizePopover.new(theme: @theme)
@@ -32,7 +32,7 @@ def view_template
         div(class: "flex flex-col gap-y-6 p-3 w-full sm:w-1/2 xl:w-1/3") do
           # render Themes::Grid::Command.new
           render Themes::Grid::Signin.new
-          render Themes::Grid::Table.new
+          # render Themes::Grid::Table.new
         end
       end
     end