diff --git a/src/content/docs/en/recipes/add-yaml-support.mdx b/src/content/docs/en/recipes/add-yaml-support.mdx
index d18ea5fae1534..14be1864bf2c0 100644
--- a/src/content/docs/en/recipes/add-yaml-support.mdx
+++ b/src/content/docs/en/recipes/add-yaml-support.mdx
@@ -4,13 +4,14 @@ description: Learn how you can import YAML data by adding a Rollup plugin to you
 i18nReady: true
 type: recipe
 ---
-
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import { Steps } from '@astrojs/starlight/components';
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 
 Astro builds on top of Vite, and supports both Vite and Rollup plugins. This recipe uses a Rollup plugin to add the ability to import a YAML (`.yml`) file in Astro.
 
 ## Recipe
 
+<Steps>
 1. Install `@rollup/plugin-yaml`:
 
     <PackageManagerTabs>
@@ -44,7 +45,6 @@ Astro builds on top of Vite, and supports both Vite and Rollup plugins. This rec
     });
     ```
 
-
 3. Finally, you can import YAML data using an `import` statement:
 
     ```js
@@ -62,3 +62,4 @@ Astro builds on top of Vite, and supports both Vite and Rollup plugins. This rec
     ```
     This will allow your editor to provide type hints for your YAML data.
     :::
+</Steps>