diff --git a/.changeset/chatty-walls-thank.md b/.changeset/chatty-walls-thank.md
new file mode 100644
index 0000000000..962def3965
--- /dev/null
+++ b/.changeset/chatty-walls-thank.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Fix previews that used old slots API
diff --git a/previews/primer/beta/border_box_preview.rb b/previews/primer/beta/border_box_preview.rb
index b3817160e6..4aa6b73bc6 100644
--- a/previews/primer/beta/border_box_preview.rb
+++ b/previews/primer/beta/border_box_preview.rb
@@ -10,47 +10,47 @@ class BorderBoxPreview < ViewComponent::Preview
       # @param scheme [Symbol] select [default, neutral, info, warning]
       def playground(padding: :default, scheme: :default)
         render(Primer::Beta::BorderBox.new(padding: padding)) do |component|
-          component.header { "Header" }
-          component.body { "Body" }
-          component.row(scheme: scheme) { "#{scheme.to_s.capitalize} row one" }
-          component.row(scheme: scheme) { "#{scheme.to_s.capitalize} row two" }
-          component.row(scheme: scheme) { "#{scheme.to_s.capitalize} row three" }
-          component.footer { "Footer" }
+          component.with_header { "Header" }
+          component.with_body { "Body" }
+          component.with_row(scheme: scheme) { "#{scheme.to_s.capitalize} row one" }
+          component.with_row(scheme: scheme) { "#{scheme.to_s.capitalize} row two" }
+          component.with_row(scheme: scheme) { "#{scheme.to_s.capitalize} row three" }
+          component.with_footer { "Footer" }
         end
       end
 
       # @label Default
       def default
         render(Primer::Beta::BorderBox.new) do |component|
-          component.header { "Header" }
-          component.body { "Body" }
-          component.row { "Row one" }
-          component.row { "Row two" }
-          component.row { "Row three" }
-          component.footer { "Footer" }
+          component.with_header { "Header" }
+          component.with_body { "Body" }
+          component.with_row { "Row one" }
+          component.with_row { "Row two" }
+          component.with_row { "Row three" }
+          component.with_footer { "Footer" }
         end
       end
 
       # @label Header with title
       def header_with_title
         render(Primer::Beta::BorderBox.new) do |component|
-          component.with_header do |h|
-            h.title(tag: :h2) do
+          component.with_header do |header|
+            header.with_title(tag: :h2) do
               "Header with title"
             end
           end
-          component.body { "Body" }
-          component.footer { "Footer" }
+          component.with_body { "Body" }
+          component.with_footer { "Footer" }
         end
       end
 
       # @label Row colors
       def row_colors
         render(Primer::Beta::BorderBox.new) do |component|
-          component.row(scheme: :default) { "Default" }
-          component.row(scheme: :neutral) { "Neutral" }
-          component.row(scheme: :info) { "Info" }
-          component.row(scheme: :warning) { "Warning" }
+          component.with_row(scheme: :default) { "Default" }
+          component.with_row(scheme: :neutral) { "Neutral" }
+          component.with_row(scheme: :info) { "Info" }
+          component.with_row(scheme: :warning) { "Warning" }
         end
       end
 
@@ -59,36 +59,36 @@ def row_colors
       # @label Default
       def padding_default
         render(Primer::Beta::BorderBox.new) do |component|
-          component.header { "Header" }
-          component.body { "Body" }
-          component.row { "Row one" }
-          component.row { "Row two" }
-          component.row { "Row three" }
-          component.footer { "Footer" }
+          component.with_header { "Header" }
+          component.with_body { "Body" }
+          component.with_row { "Row one" }
+          component.with_row { "Row two" }
+          component.with_row { "Row three" }
+          component.with_footer { "Footer" }
         end
       end
 
       # @label Condensed
       def padding_condensed
         render(Primer::Beta::BorderBox.new(padding: :condensed)) do |component|
-          component.header { "Header" }
-          component.body { "Body" }
-          component.row { "Row one" }
-          component.row { "Row two" }
-          component.row { "Row three" }
-          component.footer { "Footer" }
+          component.with_header { "Header" }
+          component.with_body { "Body" }
+          component.with_row { "Row one" }
+          component.with_row { "Row two" }
+          component.with_row { "Row three" }
+          component.with_footer { "Footer" }
         end
       end
 
       # @label Spacious
       def padding_spacious
         render(Primer::Beta::BorderBox.new(padding: :spacious)) do |component|
-          component.header { "Header" }
-          component.body { "Body" }
-          component.row { "Row one" }
-          component.row { "Row two" }
-          component.row { "Row three" }
-          component.footer { "Footer" }
+          component.with_header { "Header" }
+          component.with_body { "Body" }
+          component.with_row { "Row one" }
+          component.with_row { "Row two" }
+          component.with_row { "Row three" }
+          component.with_footer { "Footer" }
         end
       end
       #
diff --git a/previews/primer/beta/breadcrumbs_preview.rb b/previews/primer/beta/breadcrumbs_preview.rb
index 1ae1f0e54e..4e4ee5ea53 100644
--- a/previews/primer/beta/breadcrumbs_preview.rb
+++ b/previews/primer/beta/breadcrumbs_preview.rb
@@ -10,7 +10,7 @@ class BreadcrumbsPreview < ViewComponent::Preview
       def playground(number_of_links: 2)
         render(Primer::Beta::Breadcrumbs.new) do |component|
           Array.new(number_of_links || 3) do |i|
-            component.item(href: "##{i}") { "Breadcrumb Item #{i + 1}" }
+            component.with_item(href: "##{i}") { "Breadcrumb Item #{i + 1}" }
           end
         end
       end
@@ -21,7 +21,7 @@ def playground(number_of_links: 2)
       def default(number_of_links: 2)
         render(Primer::Beta::Breadcrumbs.new) do |component|
           Array.new(number_of_links || 3) do |i|
-            component.item(href: "##{i}") { "Breadcrumb Item #{i + 1}" }
+            component.with_item(href: "##{i}") { "Breadcrumb Item #{i + 1}" }
           end
         end
       end