Components

• Component Reference

Overrides

• Override Components

Conditional Override

This example overrides on specific pages using the built-in ContentPanel component.

1. Create a replacement component.

   src/components/overrides/CustomContentPanel.astro

   ---
   import type { Props } from '@astrojs/starlight/props'
   import Default from '@astrojs/starlight/components/ContentPanel.astro'
   const pageSlug = Astro.props.slug
   ---
   {
     pageSlug === ('openapi/rapidoc/pokeapi' || 'openapi/stoplight-elements/pokeapi') ? (
       <section>
         <slot />
       </section>
     ) : (
       <Default {...Astro.props}>
         <slot />
       </Default>
     )
   }
   
   <style>
     section:first-child {
       display: none;
     }
   </style>

2. Override custom component in the astro.config.mjs file.

   astro.config.mjs

   export default defineConfig({
     integrations: [
       starlight({
         components: {
           ContentPanel: "./src/components/overrides/CustomContentPanel.astro",
         },
       }),
     ],
   });