Installation: Astro

Core Idea

Same three-path pattern (shadcn/create preset, CLI scaffold, existing project). Astro requires the React integration (components render as .astro files importing React components) and uses the --- frontmatter fence for imports.

Key Concepts

• npm create astro@latest ... --template with-tailwindcss --install --add react --git: scaffolds Astro with Tailwind + React integration in one command.
• init -t astro / --monorepo: same CLI flags as other frameworks.
• Global stylesheet loading: the Tailwind starter loads global CSS through src/layouts/main.astro; keep that layout or ensure the page imports @/styles/global.css directly.
• Astro component syntax: imports go in the --- frontmatter fence, JSX-like markup below it.

Code Examples

npm create astro@latest astro-app -- --template with-tailwindcss --install --add react --git
npx shadcn@latest init -t astro
npx shadcn@latest add card

---
import Layout from "@/layouts/main.astro"
import { Button } from "@/components/ui/button"
---

<Layout>
  <div class="grid h-screen place-items-center content-center">
    <Button>Button</Button>
  </div>
</Layout>

• O que demonstra: import de componente React dentro do frontmatter Astro, usado dentro do markup do Layout.

Anti-patterns

• Dropping src/layouts/main.astro without replacing its global CSS import: breaks Tailwind/theme tokens app-wide since that's where the stylesheet is wired in.

Key Takeaways

1. Astro pages use .astro file syntax: frontmatter imports (---) + template markup, not plain .tsx.
2. Monorepo: apps/web/src/layouts/main.astro already imports @workspace/ui/globals.css, so you don't need to re-import it per page.
3. The --add react flag is required so Astro can render the React-based shadcn components at all.

Connects To

• installation-next: same shadcn/create/CLI/existing-project structure, contrast the framework-specific syntax.