diff --git a/.changeset/perfect-chefs-heal.md b/.changeset/perfect-chefs-heal.md
new file mode 100644
index 0000000000..e488c5e95c
--- /dev/null
+++ b/.changeset/perfect-chefs-heal.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+updating slot use for examples in all components in the root component folder
diff --git a/app/components/primer/blankslate_component.rb b/app/components/primer/blankslate_component.rb
index 3500a719b9..a041a6f7ef 100644
--- a/app/components/primer/blankslate_component.rb
+++ b/app/components/primer/blankslate_component.rb
@@ -41,7 +41,7 @@ class BlankslateComponent < Primer::Component
     #       title: "Title",
     #       description: "Description",
     #     ) do |component| %>
-    #       <% component.spinner(size: :large) %>
+    #       <% component.with_spinner(size: :large) %>
     #     <% end %>
     #
     # @example Custom content
diff --git a/app/components/primer/button_component.rb b/app/components/primer/button_component.rb
index 6a890dd702..731f258f58 100644
--- a/app/components/primer/button_component.rb
+++ b/app/components/primer/button_component.rb
@@ -89,20 +89,20 @@ class ButtonComponent < Primer::Component
     #
     # @example With leading visual
     #   <%= render(Primer::ButtonComponent.new) do |c| %>
-    #     <% c.leading_visual_icon(icon: :star) %>
+    #     <% c.with_leading_visual_icon(icon: :star) %>
     #     Button
     #   <% end %>
     #
     # @example With trailing visual
     #   <%= render(Primer::ButtonComponent.new) do |c| %>
-    #     <% c.trailing_visual_counter(count: 15) %>
+    #     <% c.with_trailing_visual_counter(count: 15) %>
     #     Button
     #   <% end %>
     #
     # @example With leading and trailing visuals
     #   <%= render(Primer::ButtonComponent.new) do |c| %>
-    #     <% c.leading_visual_icon(icon: :star) %>
-    #     <% c.trailing_visual_counter(count: 15) %>
+    #     <% c.with_leading_visual_icon(icon: :star) %>
+    #     <% c.with_trailing_visual_counter(count: 15) %>
     #     Button
     #   <% end %>
     #
@@ -116,7 +116,7 @@ class ButtonComponent < Primer::Component
     #     Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
     #   @code
     #     <%= render(Primer::ButtonComponent.new(id: "button-with-tooltip")) do |c| %>
-    #       <% c.tooltip(text: "Tooltip text") %>
+    #       <% c.with_tooltip(text: "Tooltip text") %>
     #       Button
     #     <% end %>
     #
diff --git a/app/components/primer/details_component.rb b/app/components/primer/details_component.rb
index 7da16bad2b..cbdbe4e321 100644
--- a/app/components/primer/details_component.rb
+++ b/app/components/primer/details_component.rb
@@ -40,10 +40,10 @@ class DetailsComponent < Primer::Component
     # @example Default
     #
     #   <%= render Primer::DetailsComponent.new do |c| %>
-    #     <% c.summary do %>
+    #     <% c.with_summary do %>
     #       Summary
     #     <% end %>
-    #     <% c.body do %>
+    #     <% c.with_body do %>
     #       Body
     #     <% end %>
     #   <% end %>
diff --git a/app/components/primer/dropdown.rb b/app/components/primer/dropdown.rb
index cd07c1cbc4..0ccaab9626 100644
--- a/app/components/primer/dropdown.rb
+++ b/app/components/primer/dropdown.rb
@@ -25,11 +25,11 @@ class Dropdown < Primer::Component
 
     # @example Default
     #   <%= render(Primer::Dropdown.new) do |c| %>
-    #     <% c.button do %>
+    #     <% c.with_button do %>
     #       Dropdown
     #     <% end %>
     #
-    #     <% c.menu(header: "Options") do |menu|
+    #     <% c.with_menu(header: "Options") do |menu|
     #       menu.item { "Item 1" }
     #       menu.item { "Item 2" }
     #       menu.item { "Item 3" }
@@ -42,11 +42,11 @@ class Dropdown < Primer::Component
     #     Dividers can be used to separate a group of items. They don't have any content.
     #   @code
     #     <%= render(Primer::Dropdown.new) do |c| %>
-    #       <% c.button do %>
+    #       <% c.with_button do %>
     #         Dropdown
     #       <% end %>
     #
-    #       <% c.menu(header: "Options") do |menu|
+    #       <% c.with_menu(header: "Options") do |menu|
     #         menu.item { "Item 1" }
     #         menu.item { "Item 2" }
     #         menu.item(divider: true)
@@ -60,11 +60,11 @@ class Dropdown < Primer::Component
     #
     # @example With direction
     #   <%= render(Primer::Dropdown.new(display: :inline_block)) do |c| %>
-    #     <% c.button do %>
+    #     <% c.with_button do %>
     #       Dropdown
     #     <% end %>
     #
-    #     <% c.menu(header: "Options", direction: :s) do |menu|
+    #     <% c.with_menu(header: "Options", direction: :s) do |menu|
     #       menu.item { "Item 1" }
     #       menu.item { "Item 2" }
     #       menu.item { "Item 3" }
@@ -74,11 +74,11 @@ class Dropdown < Primer::Component
     #
     # @example With caret
     #   <%= render(Primer::Dropdown.new(with_caret: true)) do |c| %>
-    #     <% c.button do %>
+    #     <% c.with_button do %>
     #       Dropdown
     #     <% end %>
     #
-    #     <% c.menu(header: "Options") do |menu|
+    #     <% c.with_menu(header: "Options") do |menu|
     #       menu.item { "Item 1" }
     #       menu.item { "Item 2" }
     #       menu.item { "Item 3" }
@@ -88,11 +88,11 @@ class Dropdown < Primer::Component
     #
     # @example Customizing the button
     #   <%= render(Primer::Dropdown.new) do |c| %>
-    #     <% c.button(scheme: :primary, size: :small) do %>
+    #     <% c.with_button(scheme: :primary, size: :small) do %>
     #       Dropdown
     #     <% end %>
     #
-    #     <% c.menu(header: "Options") do |menu|
+    #     <% c.with_menu(header: "Options") do |menu|
     #       menu.item { "Item 1" }
     #       menu.item { "Item 2" }
     #       menu.item { "Item 3" }
@@ -102,11 +102,11 @@ class Dropdown < Primer::Component
     #
     # @example Menu as list
     #   <%= render(Primer::Dropdown.new) do |c| %>
-    #     <% c.button do %>
+    #     <% c.with_button do %>
     #       Dropdown
     #     <% end %>
     #
-    #     <% c.menu(as: :list, header: "Options") do |menu|
+    #     <% c.with_menu(as: :list, header: "Options") do |menu|
     #       menu.item { "Item 1" }
     #       menu.item { "Item 2" }
     #       menu.item(divider: true)
@@ -117,11 +117,11 @@ class Dropdown < Primer::Component
     #
     # @example Customizing menu items
     #   <%= render(Primer::Dropdown.new) do |c| %>
-    #     <% c.button do %>
+    #     <% c.with_button do %>
     #       Dropdown
     #     <% end %>
     #
-    #     <% c.menu(header: "Options") do |menu|
+    #     <% c.with_menu(header: "Options") do |menu|
     #       menu.item(tag: :button) { "Item 1" }
     #       menu.item(classes: "custom-class") { "Item 2" }
     #       menu.item { "Item 3" }
diff --git a/app/components/primer/image_crop.rb b/app/components/primer/image_crop.rb
index 4f5323f9da..e5eb031fbc 100644
--- a/app/components/primer/image_crop.rb
+++ b/app/components/primer/image_crop.rb
@@ -21,7 +21,7 @@ class ImageCrop < Primer::Component
     #
     # @example Cropper with a custom loader
     #   <%= render(Primer::ImageCrop.new(src: "https://github.com/koddsson.png", rounded: false)) do |cropper| %>
-    #     <% cropper.loading(style: "width: 120px").with_content("Loading...") %>
+    #     <% cropper.with_loading(style: "width: 120px").with_content("Loading...") %>
     #   <% end %>
     #
     # @param src [String] The path of the image to crop.
diff --git a/app/components/primer/layout_component.rb b/app/components/primer/layout_component.rb
index f8c2ff1f04..84ae806b0c 100644
--- a/app/components/primer/layout_component.rb
+++ b/app/components/primer/layout_component.rb
@@ -38,14 +38,14 @@ class LayoutComponent < Primer::Component
 
     # @example Default
     #   <%= render(Primer::LayoutComponent.new) do |component| %>
-    #     <% component.sidebar { "Sidebar" } %>
-    #     <% component.main { "Main" } %>
+    #     <% component.with_sidebar { "Sidebar" } %>
+    #     <% component.with_main { "Main" } %>
     #   <% end %>
     #
     # @example Left sidebar
     #   <%= render(Primer::LayoutComponent.new(side: :left)) do |component| %>
-    #     <% component.sidebar { "Sidebar" } %>
-    #     <% component.main { "Main" } %>
+    #     <% component.with_sidebar { "Sidebar" } %>
+    #     <% component.with_main { "Main" } %>
     #   <% end %>
     #
     # @param responsive [Boolean] Whether to collapse layout to a single column at smaller widths.
diff --git a/app/components/primer/link_component.rb b/app/components/primer/link_component.rb
index ae0134d69c..2482ef9dc0 100644
--- a/app/components/primer/link_component.rb
+++ b/app/components/primer/link_component.rb
@@ -50,7 +50,7 @@ class LinkComponent < Primer::Component
     #     Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
     #   @code
     #     <%= render(Primer::LinkComponent.new(href: "#", id: "link-with-tooltip")) do |c| %>
-    #       <% c.tooltip(text: "Tooltip text") %>
+    #       <% c.with_tooltip(text: "Tooltip text") %>
     #       Link
     #     <% end %>
     #
diff --git a/app/components/primer/menu_component.rb b/app/components/primer/menu_component.rb
index 9c9cc1d015..42df606992 100644
--- a/app/components/primer/menu_component.rb
+++ b/app/components/primer/menu_component.rb
@@ -40,17 +40,17 @@ class MenuComponent < Primer::Component
 
     # @example Default
     #   <%= render(Primer::MenuComponent.new) do |c| %>
-    #     <% c.heading(tag: :h2) do %>
+    #     <% c.with_heading(tag: :h2) do %>
     #       Heading
     #     <% end %>
-    #     <% c.item(selected: true, href: "#url") do %>
+    #     <% c.with_item(selected: true, href: "#url") do %>
     #       Item 1
     #     <% end %>
-    #     <% c.item(href: "#url") do %>
+    #     <% c.with_item(href: "#url") do %>
     #       <%= render(Primer::OcticonComponent.new("check")) %>
     #       With Icon
     #     <% end %>
-    #     <% c.item(href: "#url") do %>
+    #     <% c.with_item(href: "#url") do %>
     #       <%= render(Primer::OcticonComponent.new("check")) %>
     #       With Icon and Counter
     #       <%= render(Primer::Beta::Counter.new(count: 25)) %>
diff --git a/app/components/primer/navigation/tab_component.rb b/app/components/primer/navigation/tab_component.rb
index 9f4e55d9b0..747f55c06b 100644
--- a/app/components/primer/navigation/tab_component.rb
+++ b/app/components/primer/navigation/tab_component.rb
@@ -64,30 +64,30 @@ class TabComponent < Primer::Component
 
       # @example Default
       #   <%= render(Primer::Navigation::TabComponent.new(selected: true)) do |c| %>
-      #     <% c.text { "Selected" } %>
+      #     <% c.with_text { "Selected" } %>
       #   <% end %>
       #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
-      #     <% c.text { "Not selected" } %>
+      #     <% c.with_text { "Not selected" } %>
       #   <% end %>
       #
       # @example With icons and counters
       #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
-      #     <% c.icon(:star) %>
-      #     <% c.text { "Tab" } %>
+      #     <% c.with_icon(:star) %>
+      #     <% c.with_text { "Tab" } %>
       #   <% end %>
       #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
-      #     <% c.icon(:star) %>
-      #     <% c.text { "Tab" } %>
-      #     <% c.counter(count: 10) %>
+      #     <% c.with_icon(:star) %>
+      #     <% c.with_text { "Tab" } %>
+      #     <% c.with_counter(count: 10) %>
       #   <% end %>
       #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
-      #     <% c.text { "Tab" } %>
-      #     <% c.counter(count: 10) %>
+      #     <% c.with_text { "Tab" } %>
+      #     <% c.with_counter(count: 10) %>
       #   <% end %>
       #
       # @example Inside a list
       #   <%= render(Primer::Navigation::TabComponent.new(list: true)) do |c| %>
-      #     <% c.text { "Tab" } %>
+      #     <% c.with_text { "Tab" } %>
       #   <% end %>
       #
       # @example With custom HTML
diff --git a/app/components/primer/popover_component.rb b/app/components/primer/popover_component.rb
index 8321e97ae0..4d4e3e94fb 100644
--- a/app/components/primer/popover_component.rb
+++ b/app/components/primer/popover_component.rb
@@ -60,40 +60,40 @@ class PopoverComponent < Primer::Component
 
     # @example Default
     #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.heading do %>
+    #     <% component.with_heading do %>
     #       Activity feed
     #     <% end %>
-    #     <% component.body do %>
+    #     <% component.with_body do %>
     #       This is the Popover body.
     #     <% end %>
     #   <% end %>
     #
     # @example Large
     #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.heading do %>
+    #     <% component.with_heading do %>
     #       Activity feed
     #     <% end %>
-    #     <% component.body(large: true) do %>
+    #     <% component.with_body(large: true) do %>
     #       This is the large Popover body.
     #     <% end %>
     #   <% end %>
     #
     # @example Caret position
     #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.heading do %>
+    #     <% component.with_heading do %>
     #       Activity feed
     #     <% end %>
-    #     <% component.body(caret: :left) do %>
+    #     <% component.with_body(caret: :left) do %>
     #       This is the Popover body.
     #     <% end %>
     #   <% end %>
     #
     # @example With multiple elements in the body
     #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.heading do %>
+    #     <% component.with_heading do %>
     #       Activity feed
     #     <% end %>
-    #     <% component.body(caret: :left) do %>
+    #     <% component.with_body(caret: :left) do %>
     #       <p>This is the Popover body.</p>
     #       <%= render Primer::ButtonComponent.new(type: :submit) do %>
     #         Got it!
diff --git a/app/components/primer/subhead_component.rb b/app/components/primer/subhead_component.rb
index a7a23e3a6e..664d63d6ed 100644
--- a/app/components/primer/subhead_component.rb
+++ b/app/components/primer/subhead_component.rb
@@ -56,27 +56,27 @@ class SubheadComponent < Primer::Component
 
     # @example Default
     #   <%= render(Primer::SubheadComponent.new) do |component| %>
-    #     <% component.heading(tag: :h3) do %>
+    #     <% component.with_heading(tag: :h3) do %>
     #       My Heading
     #     <% end %>
-    #     <% component.description do %>
+    #     <% component.with_description do %>
     #       My Description
     #     <% end %>
     #   <% end %>
     #
     # @example With dangerous heading
     #   <%= render(Primer::SubheadComponent.new) do |component| %>
-    #     <% component.heading(tag: :h3, danger: true) do %>
+    #     <% component.with_heading(tag: :h3, danger: true) do %>
     #       My Heading
     #     <% end %>
-    #     <% component.description do %>
+    #     <% component.with_description do %>
     #       My Description
     #     <% end %>
     #   <% end %>
     #
     # @example With long description
     #   <%= render(Primer::SubheadComponent.new) do |component| %>
-    #     <% component.heading(tag: :h3) do %>
+    #     <% component.with_heading(tag: :h3) do %>
     #       My Heading
     #     <% end %>
     #   <% end %>
@@ -84,23 +84,23 @@ class SubheadComponent < Primer::Component
     #
     # @example Without border
     #   <%= render(Primer::SubheadComponent.new(hide_border: true)) do |component| %>
-    #     <% component.heading do %>
+    #     <% component.with_heading do %>
     #       My Heading
     #     <% end %>
-    #     <% component.description do %>
+    #     <% component.with_description do %>
     #       My Description
     #     <% end %>
     #   <% end %>
     #
     # @example With actions
     #   <%= render(Primer::SubheadComponent.new) do |component| %>
-    #     <% component.heading do %>
+    #     <% component.with_heading do %>
     #       My Heading
     #     <% end %>
-    #     <% component.description do %>
+    #     <% component.with_description do %>
     #       My Description
     #     <% end %>
-    #     <% component.actions do %>
+    #     <% component.with_actions do %>
     #       <%= render(
     #         Primer::ButtonComponent.new(
     #           tag: :a, href: "http://www.google.com", scheme: :danger
diff --git a/app/components/primer/timeline_item_component.rb b/app/components/primer/timeline_item_component.rb
index 5cef4d3716..17c3db5e8b 100644
--- a/app/components/primer/timeline_item_component.rb
+++ b/app/components/primer/timeline_item_component.rb
@@ -40,9 +40,9 @@ class TimelineItemComponent < Primer::Component
     # @example Default
     #   <div style="padding-left: 60px">
     #     <%= render(Primer::TimelineItemComponent.new) do |component| %>
-    #       <% component.avatar(src: "https://github.com/github.png", alt: "github") %>
-    #       <% component.badge(bg: :success_emphasis, color: :on_emphasis, icon: :check) %>
-    #       <% component.body { "Success!" } %>
+    #       <% component.with_avatar(src: "https://github.com/github.png", alt: "github") %>
+    #       <% component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check) %>
+    #       <% component.with_body { "Success!" } %>
     #     <% end %>
     #   </div>
     #