diff --git a/app/components/lookbook/display_options/editor/component.html.erb b/app/components/lookbook/display_options/editor/component.html.erb
index a09a89f97..fb795c3fd 100644
--- a/app/components/lookbook/display_options/editor/component.html.erb
+++ b/app/components/lookbook/display_options/editor/component.html.erb
@@ -1,7 +1,7 @@
 <%= render_component_tag class: "px-2" do %>
   <% if fields.many? %>
     <%= lookbook_render :button, icon: :settings, tooltip: "Display options" do |button| %>
-      <% button.dropdown do %>
+      <% button.with_dropdown do %>
         <div class="p-3 space-y-3">
           <%= safe_join(fields) %>
         </div>
diff --git a/app/components/lookbook/embed/component.html.erb b/app/components/lookbook/embed/component.html.erb
index 54b49b4ef..8d8628c20 100644
--- a/app/components/lookbook/embed/component.html.erb
+++ b/app/components/lookbook/embed/component.html.erb
@@ -2,17 +2,17 @@
 <%= render_component_tag class: "not-prose border-b border-lookbook-divider rounded-sm overflow-hidden", "@navigation:start.window": "cleanup" do %>
 
   <%= lookbook_render :toolbar, class: "border border-b-0 border-lookbook-divider" do |toolbar| %>
-    <% toolbar.section padded: true do %>
+    <% toolbar.with_section padded: true do %>
       <h3>
         <%= @target.preview.label %> (<%= @target.label %>)
       </h3>
     <% end %>
-    <% toolbar.section align: :right, divide: :left do %>
+    <% toolbar.with_section align: :right, divide: :left do %>
       <%= lookbook_render :button_group do |group| %>
-        <% group.button icon: :eye,
+        <% group.with_button icon: :eye,
           href: lookbook_inspect_path(@target.path, @params),
           tooltip: "View in Inspector" %>
-        <% group.button icon: :external_link,
+        <% group.with_button icon: :external_link,
           href: lookbook_preview_path(@target.path, @params),
           tooltip: "Open in new window",
           target: "_blank" %>
diff --git a/app/components/lookbook/header/component.html.erb b/app/components/lookbook/header/component.html.erb
index 9a226ddea..0eeb9e0da 100644
--- a/app/components/lookbook/header/component.html.erb
+++ b/app/components/lookbook/header/component.html.erb
@@ -1,6 +1,6 @@
 <%= render_component_tag :header do %>
   <%= lookbook_render :toolbar, class: "!bg-lookbook-header-bg !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
-    <% toolbar.section padded: true do %>
+    <% toolbar.with_section padded: true do %>
       <% if branding.present? %>
         <a
           <% if landing_path %>href="<%= landing_path %>"<% end %>    
@@ -10,7 +10,7 @@
       <% end %>
     <% end %>
 
-    <% toolbar.section padded: false, align: :right, class: "flex items-center" do %>
+    <% toolbar.with_section padded: false, align: :right, class: "flex items-center" do %>
 
       <div x-show="loading" x-cloak>
         <svg class="animate-spin h-3.5 w-3.5 text-lookbook-header-text opacity-60" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -21,23 +21,23 @@
 
       <%= lookbook_render :button_group do |group| %>
         <% if @debug_menu %>
-          <% group.button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text", "x-show": "!loading" do |button| %>
+          <% group.with_button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text", "x-show": "!loading" do |button| %>
             <% menu = lookbook_render :debug_menu,
               version: Lookbook::VERSION,
               docs_url: "https://lookbook.build/guide",
               repo_url: "https://github.com/ViewComponent/lookbook" do %>
               <%= helpers.pretty_json(Lookbook.debug_data) %>
             <% end %>
-            <% button.dropdown({}).with_content(menu) %>
+            <% button.with_dropdown({}).with_content(menu) %>
           <% end %>
         <% end %>
 
-        <% group.button icon: :menu,
+        <% group.with_button icon: :menu,
           "@click.stop": "toggleSidebar",
           "x-show": "$store.layout.mobile && sidebarHidden",
           class: "!text-lookbook-header-text" %>
 
-        <% group.button icon: :x,
+        <% group.with_button icon: :x,
           "@click.stop": "toggleSidebar",
           "x-show": "$store.layout.mobile && !sidebarHidden",
           "@keydown.esc.window": "closeMobileSidebar",
diff --git a/app/components/lookbook/tabs/component.rb b/app/components/lookbook/tabs/component.rb
index 48b2f2665..d2550f5a0 100644
--- a/app/components/lookbook/tabs/component.rb
+++ b/app/components/lookbook/tabs/component.rb
@@ -5,7 +5,7 @@ class Tabs::Component < Lookbook::BaseComponent
       attrs[:name] ||= "tab-#{@tab_counter}"
       attrs[:position] ||= @tab_counter
       attrs[:theme] ||= @theme
-      dropdown_tab(**attrs)
+      with_dropdown_tab(**attrs)
       Lookbook::Tabs::Tab::Component.new(**attrs)
     end
 
diff --git a/app/views/layouts/lookbook/application.html.erb b/app/views/layouts/lookbook/application.html.erb
index 9dff63dbb..13f437b3c 100644
--- a/app/views/layouts/lookbook/application.html.erb
+++ b/app/views/layouts/lookbook/application.html.erb
@@ -5,7 +5,7 @@
       alpine_data: "$store.layout.main",
       ":class": "$store.layout.mobile && '!block'" do |layout| %>
 
-      <% layout.pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar-bg relative translate-x-0",
+      <% layout.with_pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar-bg relative translate-x-0",
         ":class": "{
           'transition': $store.layout.mobile,
           'translate-x-full': $store.layout.mobile && sidebarHidden,
@@ -19,41 +19,41 @@
             style: "height: calc(100vh - 2.5rem);" do |layout| %>
 
             <% if @previews.any? %>
-              <% layout.pane class: "overflow-hidden" do %>
+              <% layout.with_pane class: "overflow-hidden" do %>
                 <%= lookbook_render :nav,
                   id: "previews-nav",
                   tree: @previews.to_tree,
                   alpine_data: "$store.nav.previews" do |nav| %>
-                  <%= nav.toolbar do |toolbar| %>
-                    <% toolbar.section padded: true do %>
+                  <%= nav.with_toolbar do |toolbar| %>
+                    <% toolbar.with_section padded: true do %>
                       <h4 class="pt-1">Previews</h4>
                     <% end %>
-                    <% toolbar.section align: :right, padded: false do %>
+                    <% toolbar.with_section align: :right, padded: false do %>
                       <%= lookbook_render :button_group, size: :xs do |group| %>
-                        <% group.button icon: :minus_square,
+                        <% group.with_button icon: :minus_square,
                           tooltip: "Collapse all",
                           "@click": "closeAll" %>
                       <% end %>
                     <% end %>
                   <% end %>
-                  <% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
+                  <% nav.with_filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
                 <% end %>
               <% end %>
             <% end %>
 
             <% if @pages.any? %>
-              <% layout.pane class: "overflow-hidden" do %>
+              <% layout.with_pane class: "overflow-hidden" do %>
                 <%= lookbook_render :nav,
                   id: "pages-nav",
                   tree: @pages.to_tree,
                   alpine_data: "$store.nav.pages" do |nav| %>
-                  <%= nav.toolbar do |toolbar| %>
-                    <% toolbar.section padded: true do %>
+                  <%= nav.with_toolbar do |toolbar| %>
+                    <% toolbar.with_section padded: true do %>
                       <h4 class="pt-1">Pages</h4>
                     <% end %>
-                    <% toolbar.section align: :right, padded: false do %>
+                    <% toolbar.with_section align: :right, padded: false do %>
                       <%= lookbook_render :button_group, size: :xs do |group| %>
-                        <% group.button icon: :minus_square,
+                        <% group.with_button icon: :minus_square,
                           tooltip: "Collapse all",
                           "@click": "closeAll" %>
                       <% end %>
@@ -66,7 +66,7 @@
         <% end %>
       <% end %>
 
-      <% layout.pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>
+      <% layout.with_pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>
         <%= content_for?(:main) ? yield(:main) : yield %>
       <% end %>
     <% end %>
diff --git a/app/views/layouts/lookbook/shell.html.erb b/app/views/layouts/lookbook/shell.html.erb
index f328a9de0..3f9fe09a9 100644
--- a/app/views/layouts/lookbook/shell.html.erb
+++ b/app/views/layouts/lookbook/shell.html.erb
@@ -15,7 +15,7 @@
     <% end %>
 
     <%= lookbook_render :header, id: "app-header", debug_menu: @config.debug_menu do |header| %>
-      <% header.branding { @config.project_name } %>
+      <% header.with_branding { @config.project_name } %>
     <% end %>
 
     <%= content_for?(:shell) ? yield(:shell) : yield %>
diff --git a/app/views/lookbook/inspector/panels/_params.html.erb b/app/views/lookbook/inspector/panels/_params.html.erb
index 672c06688..b14e04619 100644
--- a/app/views/lookbook/inspector/panels/_params.html.erb
+++ b/app/views/lookbook/inspector/panels/_params.html.erb
@@ -8,7 +8,7 @@
   <div class="p-4 w-full h-full overflow-x-hidden" id="params-editor-<%= @target.id %>">
     <%= lookbook_render "params/editor" do |editor| %>
       <% @params.each do |param| %>
-        <% editor.field param: param %>
+        <% editor.with_field param: param %>
       <% end %>
     <% end %>
   </div>
diff --git a/app/views/lookbook/inspector/show.html.erb b/app/views/lookbook/inspector/show.html.erb
index 6ea9a84da..776cb50c2 100644
--- a/app/views/lookbook/inspector/show.html.erb
+++ b/app/views/lookbook/inspector/show.html.erb
@@ -5,14 +5,14 @@
     "preview-target": @target.id
   } do |layout| %>
 
-  <%= layout.pane class: "flex flex-col h-full overflow-hidden",
+  <%= layout.with_pane class: "flex flex-col h-full overflow-hidden",
     "x-effect": "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
   
     <%= lookbook_render :toolbar, id: "main-toolbar" do |toolbar| %>
-      <% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
+      <% toolbar.with_section ":class": "layoutResizing && 'overflow-hidden'" do %>
         <%= lookbook_render :tabs, alpine_data: "$store.inspector.main", id: "inspector-tabs-main" do |tabs| %>
           <%= @main_panels.each do |panel| %>
-            <% tabs.tab name: panel.name,
+            <% tabs.with_tab name: panel.name,
               label: panel.label,
               hotkey: panel.hotkey,
               disabled: panel.disabled %>
@@ -20,42 +20,42 @@
         <% end %>
       <% end %>
 
-      <% toolbar.section align: :right, class: "flex-none" do %>
+      <% toolbar.with_section align: :right, class: "flex-none" do %>
         <% if @dynamic_display_options.any? %>
           <%= lookbook_render "display_options/editor" do |editor| %>
             <% @dynamic_display_options.each do |key, opts| %>
-              <% editor.field name: key, opts: opts, value: @static_display_options[key] %>
+              <% editor.with_field name: key, opts: opts, value: @static_display_options[key] %>
             <% end %>
           <% end %>
         <% end %>
       <% end %>
 
-      <% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
+      <% toolbar.with_section divide: :left, class: "flex-none relative z-10" do %>
         <%= lookbook_render :button_group do |group| %>
-          <% group.button icon: :link,
+          <% group.with_button icon: :link,
             tooltip: "Copy preview URL",
             copy: true do %>
             <%= lookbook_inspect_url(@target.lookup_path, request.query_parameters) %>
           <% end %>
 
           <% if @pages.any? %>
-            <% group.button icon: :code,
+            <% group.with_button icon: :code,
               tooltip: "Copy page embed code",
               copy: true do %>
                 &lt;%= embed <%= @preview.preview_class_name %>, :<%= @target.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %&gt;
             <% end %>
           <% end %>
           
-          <% group.button icon: :refresh_cw,
+          <% group.with_button icon: :refresh_cw,
             tooltip: "Refresh preview",
             "@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
 
-          <% group.button icon: :external_link,
+          <% group.with_button icon: :external_link,
             href: lookbook_preview_path(@target.lookup_path, request.query_parameters),
             tooltip: "Open preview in new window",
             target: "_blank" %>
 
-          <% group.button icon: "vertical ? 'sidebar' : 'credit-card'",
+          <% group.with_button icon: "vertical ? 'sidebar' : 'credit-card'",
             tooltip: "Show drawer",
             "@click": "$store.inspector.drawer.hidden = false",
             class: "rotate-180",
@@ -68,7 +68,7 @@
     <div class="h-full relative overflow-auto">
       <%= lookbook_render :tab_panels, alpine_data: "$store.inspector.main", id: "inspector-panels-main" do |tabs| %>
         <% @main_panels.each do |panel| %>
-          <% tabs.panel name: panel.name do %>
+          <% tabs.with_panel name: panel.name do %>
             <%= lookbook_render :inspector_panel, name: panel.name do %>
               <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
             <% end %>
@@ -78,14 +78,14 @@
     </div>
   <% end %>
 
-  <%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer-bg",
+  <%= layout.with_pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer-bg",
     "x-show": "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
 
     <%= lookbook_render :toolbar, id: "drawer-toolbar" do |toolbar| %>
-      <% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
+      <% toolbar.with_section ":class": "layoutResizing && 'overflow-hidden'" do %>
         <%= lookbook_render :tabs, alpine_data: "$store.inspector.drawer", id: "inspector-tabs-drawer" do |tabs| %>
           <%= @drawer_panels.each do |panel| %>
-            <% tabs.tab name: panel.name,
+            <% tabs.with_tab name: panel.name,
               label: panel.label,
               hotkey: panel.hotkey,
               disabled: panel.disabled %>
@@ -93,10 +93,10 @@
         <% end %>
       <% end %>
 
-      <% toolbar.section align: :right,  class: "flex-none relative z-10" do %>
+      <% toolbar.with_section align: :right,  class: "flex-none relative z-10" do %>
         <%= lookbook_render :button_group do |group| %>
           <%= @drawer_panels.select { |p| !p.disabled && p.copy }.each do |panel| %>
-            <% group.button icon: :copy,
+            <% group.with_button icon: :copy,
               tooltip: "Copy panel contents",
               copy: !!panel.copy,
               "x-show": "$store.inspector.drawer.activeTab === '#{panel.name}'",
@@ -107,27 +107,27 @@
         <% end %>
       <% end %>
 
-      <% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
+      <% toolbar.with_section divide: :left, class: "flex-none relative z-10" do %>
         <%= lookbook_render :button_group do |group| %>
 
-          <% group.button icon: :corner_up_right,
+          <% group.with_button icon: :corner_up_right,
             tooltip: "Move drawer to right",
             "@click": "switchOrientation",
             "x-show": "horizontal && layoutWidth > $store.inspector.minVerticalSplitWidth",
             cloak: true %>
 
-          <% group.button icon: :corner_up_right,
+          <% group.with_button icon: :corner_up_right,
             "x-show": "horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth",
             disabled: true,
             cloak: true %>
 
-          <% group.button icon: :corner_left_down,
+          <% group.with_button icon: :corner_left_down,
             tooltip: "Move drawer to bottom",
             "@click": "switchOrientation",
             "x-show": "vertical",
             cloak: true %>
 
-          <% group.button icon: :x_circle,
+          <% group.with_button icon: :x_circle,
             tooltip: "Hide drawer",
             "@click": "$store.inspector.drawer.hidden = true",
             cloak: true %>
@@ -138,7 +138,7 @@
     <div class="h-full overflow-auto">
       <%= lookbook_render :tab_panels, alpine_data: "$store.inspector.drawer", id: "inspector-panels-drawer" do |tabs| %>
         <% @drawer_panels.each do |panel| %>
-          <% tabs.panel name: panel.name do %>
+          <% tabs.with_panel name: panel.name do %>
             <%= lookbook_render :inspector_panel, name: panel.name do %>
               <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
             <% end %>
diff --git a/app/views/lookbook/pages/show.html.erb b/app/views/lookbook/pages/show.html.erb
index 1109df31f..3e0ea4e2e 100644
--- a/app/views/lookbook/pages/show.html.erb
+++ b/app/views/lookbook/pages/show.html.erb
@@ -13,7 +13,7 @@
     <% if @page.sections.any? %>
       <%= lookbook_render :page_tabs, id: "page-tabbed-sections", markdown: false, class: "mt-6" do |page_tabs| %>
         <% @page.sections.each do |section| %>
-          <% page_tabs.tab name: "page-section-#{section.name}", label: section.label do %>
+          <% page_tabs.with_tab name: "page-section-#{section.name}", label: section.label do %>
             <%= page_controller.render_page(section) %>
           <% end %>
         <% end %>
diff --git a/spec/components/button_group_component_spec.rb b/spec/components/button_group_component_spec.rb
index 21fb9ef2f..cb1ab0752 100644
--- a/spec/components/button_group_component_spec.rb
+++ b/spec/components/button_group_component_spec.rb
@@ -3,7 +3,7 @@
 RSpec.describe Lookbook::ButtonGroup::Component, type: :component do
   it "renders the component" do
     render_inline(described_class.new) do |group|
-      group.button icon: :book
+      group.with_button icon: :book
     end
 
     expect(page).to have_css("[data-component='button-group']")
diff --git a/spec/components/page_tabs_component_spec.rb b/spec/components/page_tabs_component_spec.rb
index 286a7b3ff..77dfd84e8 100644
--- a/spec/components/page_tabs_component_spec.rb
+++ b/spec/components/page_tabs_component_spec.rb
@@ -3,10 +3,10 @@
 RSpec.describe Lookbook::PageTabs::Component, type: :component do
   it "renders the component" do
     render_inline(described_class.new) do |tabs|
-      tabs.tab label: "First tab" do
+      tabs.with_tab label: "First tab" do
         "First"
       end
-      tabs.tab label: "Second tab" do
+      tabs.with_tab label: "Second tab" do
         "Second"
       end
     end
@@ -16,13 +16,13 @@
 
   it "includes all the tabs" do
     render_inline(described_class.new) do |tabs|
-      tabs.tab label: "First tab" do
+      tabs.with_tab label: "First tab" do
         "First"
       end
-      tabs.tab label: "Second tab" do
+      tabs.with_tab label: "Second tab" do
         "Second"
       end
-      tabs.tab label: "Third tab" do
+      tabs.with_tab label: "Third tab" do
         "Third"
       end
     end
diff --git a/spec/components/split_pane_component_spec.rb b/spec/components/split_pane_component_spec.rb
index 883a0cbd0..41cf96eeb 100644
--- a/spec/components/split_pane_component_spec.rb
+++ b/spec/components/split_pane_component_spec.rb
@@ -3,8 +3,8 @@
 RSpec.describe Lookbook::SplitLayout::Component, type: :component do
   it "renders the component" do
     render_inline(described_class.new(alpine_data: "$store.namespace.layoutStoreObject")) do |layout|
-      layout.pane { "First pane" }
-      layout.pane { "Second pane" }
+      layout.with_pane { "First pane" }
+      layout.with_pane { "Second pane" }
     end
 
     expect(page).to have_css("[data-component=split-layout]")
diff --git a/spec/components/tab_panels_component_spec.rb b/spec/components/tab_panels_component_spec.rb
index e51776e20..08d58aac6 100644
--- a/spec/components/tab_panels_component_spec.rb
+++ b/spec/components/tab_panels_component_spec.rb
@@ -3,8 +3,8 @@
 RSpec.describe Lookbook::TabPanels::Component, type: :component do
   it "renders the component" do
     render_inline(described_class.new(alpine_data: "$store.namespace.objectWithActiveTabProperty")) do |tabs|
-      tabs.panel { "First section" }
-      tabs.panel { "Second section" }
+      tabs.with_panel { "First section" }
+      tabs.with_panel { "Second section" }
     end
 
     expect(page).to have_css("[data-component=tab-panels]")
@@ -12,9 +12,9 @@
 
   it "includes all the expected content sections" do
     render_inline(described_class.new(alpine_data: "$store.namespace.objectWithActiveTabProperty")) do |tabs|
-      tabs.panel { "First section" }
-      tabs.panel { "Second section" }
-      tabs.panel { "Third section" }
+      tabs.with_panel { "First section" }
+      tabs.with_panel { "Second section" }
+      tabs.with_panel { "Third section" }
     end
 
     expect(page).to have_css("[data-component=tab-panels-panel]", count: 3)
diff --git a/spec/components/tabs_component_spec.rb b/spec/components/tabs_component_spec.rb
index 7d26449e2..eed607111 100644
--- a/spec/components/tabs_component_spec.rb
+++ b/spec/components/tabs_component_spec.rb
@@ -5,8 +5,8 @@
 
   it "renders the component" do
     render_inline(described_class.new(alpine_data: alpine_data)) do |tabs|
-      tabs.tab label: "First tab"
-      tabs.tab label: "Second tab"
+      tabs.with_tab label: "First tab"
+      tabs.with_tab label: "Second tab"
     end
 
     expect(page).to have_css("[data-component=tabs]")
@@ -14,9 +14,9 @@
 
   it "includes all the tabs" do
     render_inline(described_class.new(alpine_data: alpine_data)) do |tabs|
-      tabs.tab label: "First tab"
-      tabs.tab label: "Second tab"
-      tabs.tab label: "Third tab"
+      tabs.with_tab label: "First tab"
+      tabs.with_tab label: "Second tab"
+      tabs.with_tab label: "Third tab"
     end
 
     expect(page).to have_css("[data-component=tabs-tab]", count: 3)
diff --git a/workbench/app/previews/button_component_preview.rb b/workbench/app/previews/button_component_preview.rb
index c17172d2a..49b3a6b9e 100644
--- a/workbench/app/previews/button_component_preview.rb
+++ b/workbench/app/previews/button_component_preview.rb
@@ -46,7 +46,7 @@ def with_content
 
   def with_dropdown
     render Lookbook::Button::Component.new icon: :book do |button|
-      button.dropdown do
+      button.with_dropdown do
         "<div class='p-4'>Some dropdown content</div>".html_safe
       end
     end
diff --git a/workbench/app/previews/button_group_component_preview.rb b/workbench/app/previews/button_group_component_preview.rb
index 688dc2723..59291c537 100644
--- a/workbench/app/previews/button_group_component_preview.rb
+++ b/workbench/app/previews/button_group_component_preview.rb
@@ -2,9 +2,9 @@
 class ButtonGroupComponentPreview < ViewComponent::Preview
   def default
     render Lookbook::ButtonGroup::Component.new do |group|
-      group.button icon: :book
-      group.button icon: :book_open
-      group.button icon: :smile
+      group.with_button icon: :book
+      group.with_button icon: :book_open
+      group.with_button icon: :smile
     end
   end
 end
diff --git a/workbench/app/previews/page_tabs_component_preview.rb b/workbench/app/previews/page_tabs_component_preview.rb
index ffc4f39c1..3767fc8c7 100644
--- a/workbench/app/previews/page_tabs_component_preview.rb
+++ b/workbench/app/previews/page_tabs_component_preview.rb
@@ -2,10 +2,10 @@
 class PageTabsComponentPreview < ViewComponent::Preview
   def basic
     render Lookbook::PageTabs::Component.new do |tabs|
-      tabs.tab label: "First tab" do
+      tabs.with_tab label: "First tab" do
         "<p>First tab content</p>".html_safe
       end
-      tabs.tab label: "Second tab" do
+      tabs.with_tab label: "Second tab" do
         "<p>Second tab content</p>".html_safe
       end
     end
diff --git a/workbench/app/previews/params_editor_component_preview.rb b/workbench/app/previews/params_editor_component_preview.rb
index 69d314019..d654d243a 100644
--- a/workbench/app/previews/params_editor_component_preview.rb
+++ b/workbench/app/previews/params_editor_component_preview.rb
@@ -1,9 +1,9 @@
 class ParamsEditorComponentPreview < ViewComponent::Preview
   def field_examples
     render Lookbook::ParamsEditor::Component.new do |editor|
-      editor.field input: "text", name: "text-field"
-      editor.field input: "textarea", name: "textarea"
-      editor.field input: "select", name: "select input", options: ["option 1", "option 2"]
+      editor.with_field input: "text", name: "text-field"
+      editor.with_field input: "textarea", name: "textarea"
+      editor.with_field input: "select", name: "select input", options: ["option 1", "option 2"]
     end
   end
 end
diff --git a/workbench/app/previews/split_layout_component_preview/three_panes_vertical.html.erb b/workbench/app/previews/split_layout_component_preview/three_panes_vertical.html.erb
index ce6b04b03..1b56e478b 100644
--- a/workbench/app/previews/split_layout_component_preview/three_panes_vertical.html.erb
+++ b/workbench/app/previews/split_layout_component_preview/three_panes_vertical.html.erb
@@ -1,17 +1,17 @@
 <%= render Lookbook::SplitLayout::Component.new(alpine_data: "$store.workbench.verticalSplitLayout", style: "min-height: calc(100vh - 48px);") do |layout| %>
-  <% layout.pane do %>
+  <% layout.with_pane do %>
     <div style="border: 1px solid #ddd; border-right: 0; width: 100%; height: 100%; padding: 20px;">
       Drag dividers to resize panes.
     </div>
   <% end %>
 
-  <% layout.pane do %>
+  <% layout.with_pane do %>
     <div style="border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; width: 100%; height: 100%; padding: 20px;">
       Drag dividers to resize panes.
     </div>
   <% end %>
 
-  <% layout.pane do %>
+  <% layout.with_pane do %>
     <div style="border: 1px solid #ddd; border-left: 0; width: 100%; height: 100%; padding: 20px;">
       Drag dividers to resize panes.
     </div>
diff --git a/workbench/app/previews/split_layout_component_preview/two_panes_horizontal.html.erb b/workbench/app/previews/split_layout_component_preview/two_panes_horizontal.html.erb
index 15b5c630a..b3d49116b 100644
--- a/workbench/app/previews/split_layout_component_preview/two_panes_horizontal.html.erb
+++ b/workbench/app/previews/split_layout_component_preview/two_panes_horizontal.html.erb
@@ -1,11 +1,11 @@
 <%= render Lookbook::SplitLayout::Component.new(alpine_data: "$store.workbench.horizontalSplitLayout", style: "min-height: calc(100vh - 48px);") do |layout| %>
-  <% layout.pane do %>
+  <% layout.with_pane do %>
     <div style="border: 1px solid #ddd; border-bottom: 0; width: 100%; height: 100%; padding: 20px;">
       Drag divider to resize panes.
     </div>
   <% end %>
 
-  <% layout.pane do %>
+  <% layout.with_pane do %>
     <div style="border: 1px solid #ddd; border-top: 0; width: 100%; height: 100%; padding: 20px;">
       Drag divider to resize panes.
     </div>
diff --git a/workbench/app/previews/toolbar_tabs_preview/default.html.erb b/workbench/app/previews/toolbar_tabs_preview/default.html.erb
index e208c0778..f62fc1687 100644
--- a/workbench/app/previews/toolbar_tabs_preview/default.html.erb
+++ b/workbench/app/previews/toolbar_tabs_preview/default.html.erb
@@ -1,10 +1,10 @@
 <%= render Lookbook::Toolbar::Component.new do |toolbar| %>
-  <% toolbar.section do %>
+  <% toolbar.with_section do %>
     <%= render Lookbook::Tabs::Component.new alpine_data: "$store.workbench.tabbedPanels" do |tabs| %>
-      <% tabs.tab label: "First tab" %>
-      <% tabs.tab label: "Second tab" %>
-      <% tabs.tab label: "Third tab" %>
-      <% tabs.tab label: "Fourth tab" %>
+      <% tabs.with_tab label: "First tab" %>
+      <% tabs.with_tab label: "Second tab" %>
+      <% tabs.with_tab label: "Third tab" %>
+      <% tabs.with_tab label: "Fourth tab" %>
     <% end %>
   <% end %>
 <% end %>
@@ -13,16 +13,16 @@
   alpine_data: "$store.workbench.tabbedPanels",
   class: "border border-gray-300 border-t-0 p-4 !h-auto"
 ) do |tabs| %>
-  <% tabs.panel do %>
+  <% tabs.with_panel do %>
     First panel
   <% end %>
-  <% tabs.panel do %>
+  <% tabs.with_panel do %>
     Second panel
   <% end %>
-  <% tabs.panel do %>
+  <% tabs.with_panel do %>
     Third panel
   <% end %>
-  <% tabs.panel do %>
+  <% tabs.with_panel do %>
     Fourth panel
   <% end %>
 <% end %>