diff --git a/docs/shared/recipes/add-stack/astro.md b/docs/shared/recipes/add-stack/astro.md
new file mode 100644
index 0000000000000..433559282bf50
--- /dev/null
+++ b/docs/shared/recipes/add-stack/astro.md
@@ -0,0 +1,104 @@
+# Add a New Qwik Project
+
+The code for this example is available on GitHub:
+
+{% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/astro" /%}
+
+**Supported Features**
+
+{% pill url="/core-features/run-tasks" %}✅ Run Tasks{% /pill %}
+{% pill url="/core-features/cache-task-results" %}✅ Cache Task Results{% /pill %}
+{% pill url="/core-features/share-your-cache" %}✅ Share Your Cache{% /pill %}
+{% pill url="/core-features/explore-graph" %}✅ Explore the Graph{% /pill %}
+{% pill url="/core-features/distribute-task-execution" %}✅ Distribute Task Execution{% /pill %}
+{% pill url="/core-features/integrate-with-editors" %}✅ Integrate with Editors{% /pill %}
+{% pill url="/core-features/automate-updating-dependencies" %}❌ Automate Updating Nx{% /pill %}
+{% pill url="/core-features/enforce-project-boundaries" %}✅ Enforce Project Boundaries{% /pill %}
+{% pill url="/plugin-features/use-task-executors" %}✅ Use Task Executors{% /pill %}
+{% pill url="/plugin-features/use-code-generators" %}✅ Use Code Generators{% /pill %}
+{% pill url="/core-features/automate-updating-dependencies" %}❌ Automate Updating Framework Dependencies{% /pill %}
+
+## Create an astro app
+
+```shell
+npm create astro@latest
+```
+
+## Add Nx
+
+We can leverage [`nx init`](/recipes/adopting-nx/adding-to-existing-project#installing-nx-on-a-non-monorepo-project) to add Nx to the Astro application.
+
+```{% command="npx nx@latest init" %}
+ >  NX   🐳 Nx initialization
+
+
+ >  NX   🧑‍🔧 Please answer the following questions about the scripts found in your package.json in order to generate task runner configuration
+
+✔ Which of the following scripts are cacheable? (Produce the same output given the same input, e.g. build, test and lint usually are, serve and start are not). You can use spacebar to select one or more scripts. · build
+
+✔ Does the "build" script create any outputs? If not, leave blank, otherwise provide a path (e.g. dist, lib, build, coverage) · dist
+✔ Enable distributed caching to make your CI faster · No
+
+ >  NX   📦 Installing dependencies
+
+ >  NX   🎉 Done!
+
+   - Enabled computation caching!
+   - Learn more at https://nx.dev/recipes/adopting-nx/adding-to-existing-project.
+```
+
+You can add a task as cacheable after the fact by updating the `cacheableOperations` in the `nx.json` file. Learn more about [caching task results](/recipes/adopting-nx/adding-to-existing-project#installing-nx-on-a-non-monorepo-project) or [how caching works](https://nx.dev/core-features/cache-task-results).
+
+## Using Plugins
+
+With Nx plugins, you can create projects to help break out functionality of the project. For example, using the [`@nx/js:library`](https://nx.dev/packages/js/generators/library#@nx/js:library) to contain our reusable `.astro` components.
+
+Install `@nx/js` plugin.
+
+> Note: you should make sure any first party, `@nx/` scoped, plugins match the `nx` package version
+
+```shell
+npm i -DE @nx/js@<nx-version>
+```
+
+Then generate a project
+
+```{% command="nx g lib --simpleName --minimal}
+>  NX  Generating @nx/js:library
+
+✔ What name would you like to use for the library? · ui
+✔ Which unit test runner would you like to use? · none
+✔ Which bundler would you like to use to build the library? Choose 'none' to skip build setup. · none
+
+CREATE ui/tsconfig.json
+CREATE ui/src/index.ts
+CREATE ui/src/lib/ui.ts
+CREATE ui/tsconfig.lib.json
+CREATE ui/project.json
+CREATE ui/.eslintrc.json
+UPDATE tsconfig.json
+```
+
+If you plan to import `.astro` files within `.ts` files, then you can install the [`@astrojs/ts-plugin`](https://www.npmjs.com/package/@astrojs/ts-plugin).
+
+An easier option is to allow importing the files via the root `tsconfig.json` instead of a `index.ts` file.
+
+```json {% fileName="tsconfig.json"}
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@myrepo/ui/*": ["ui/src/*"]
+    }
+  }
+}
+```
+
+This allows import in our `.astro` files like so
+
+```ts
+import Card from '@myrepo/ui/Card.astro';
+import Footer from '@myrepo/ui/Footer.astro';
+import Header from '@myrepo/ui/Header.astro';
+```