## Overview Use `Guide` and `GuideStep` for full-page install walkthroughs with prose and code blocks per step. The existing `Steps` / `Step` pair remains for compact lists inside `InstallTabs`. ## Numbered guide (install walkthrough) ```bash dotnet new aspire-starter -n ShopApp cd ShopApp ``` ```bash dotnet add ShopApp.AppHost package Aspire.Hosting.PostgreSQL ``` Update `AppHost/Program.cs` to add Postgres and wire the API: ```csharp title="AppHost/Program.cs" var builder = DistributedApplication.CreateBuilder(args); var postgres = builder.AddPostgres("postgres") .AddDatabase("catalog"); var api = builder.AddProject("catalog-api") .WithReference(postgres); builder.AddProject("web") .WithReference(api); builder.Build().Run(); ``` ```bash dotnet run --project ShopApp.AppHost ``` Open the Aspire dashboard URL printed in the console. ## Pill markers (unnumbered) ```bash npx create-next-app@latest my-project --typescript --eslint cd my-project ``` ```bash npm install tailwindcss @tailwindcss/postcss @tailwindcss/cli ``` Create a new CSS file (e.g., `app/globals.css`) and add the Tailwind import: ```css title="app/globals.css" @import "tailwindcss"; @theme inline { --font-display: "Inter", "sans-serif"; --color-primary-500: oklch(0.84 0.18 117.33); --spacing: 0.25rem; } ``` Update your PostCSS configuration: ```js title="postcss.config.js" module.exports = { plugins: { '@tailwindcss/postcss': {}, }, }; ``` ```bash npm run dev ``` ```tsx title="app/page.tsx" export default function Home() { return

Hello world!

; } ``` ## When to use Guide vs Steps | Scenario | Component | | --- | --- | | Full tutorial with prose + multiple code blocks per step | `Guide` / `GuideStep` | | Short manual steps inside `InstallTabs` | `Steps` / `Step` |