# frozen_string_literal: true

class Avo::Views::ResourceCustomIndexComponent < Avo::Views::ResourceIndex
  def initialize(**kwargs)  # [!code ++]
    @kwargs = kwargs  # [!code ++]
  end  # [!code ++]
end
```

Update the ERB template to render a message above the original component:

:::warning
All Tailwind CSS classes used in this guide are already part of Avo's design system and included in its pre-purged assets. If you plan to customize the appearance of the message component beyond what's shown here, you may need to set up the TailwindCSS integration.
:::

```html

<div>Add Avo::Views::ResourceCustomIndexComponent template here</div> 
<div class="flex flex-col"> 
  <div class=" w-full shadow-lg rounded px-2 py-3 rounded relative border text-white pointer-events-auto bg-blue-400 border-blue-600 mb-4"> 
    <div class="flex h-full"> 
      <div class="ml-3 w-0 flex-1 pt-0.5"> 
        <p class="text-sm leading-5 font-semibold"> 
          <strong>MovieFest 2025</strong> • Discover what\'s trending this season in cinema 🍿 
        </p> 
      </div> 
    </div> 
  </div> 

  <%= render Avo::Views::ResourceIndexComponent.new(**@kwargs) %> 
</div> 
```

Now when you visit the Movies resource page, it will render the custom component that shows the original component and your custom message on top. 🎉🎉🎉

<Image src="/assets/img/guides/index_messages/custom_index_component_2.png" width="1664" height="745" alt="Original component + message as index" />

## Apply this component to all the resources

You can apply the new component to each resource individually by setting `self.components`, but there's a more efficient approach. Since all your resources inherit from `Avo::BaseResource`, we can centralize this configuration by extending that base class.

To do this, override the base resource class by creating or modifying `app/avo/base_resource.rb`:

```rb