index.html.erb

<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>

<%= render OuterComponent.new do |c| %>
  <% c.button { render InnerComponent.new } %>
<% end %>

inner_component.html.erb

<div>Add Inner template here</div>

inner_component.rb

# frozen_string_literal: true

class InnerComponent < ApplicationComponent

end

outer_component.html.erb

<div>
  <p>OuterComponent</p>
  <%= button %>
</div>

outer_component.rb

# frozen_string_literal: true

class OuterComponent < ApplicationComponent
  renders_one :button
end

outer_component_preview.rb

class OuterComponentPreview < ViewComponent::Preview
  def default
    render(OuterComponent.new) do |c|
      c.button { render(InnerComponent.new) }
    end
  end
end