Astro React Template

Astro site with React islands, Tailwind CSS v4 (Vite plugin), and shadcn/ui-style components (components.json).

Prerequisites

• Node.js 20+ (LTS recommended)

Clone and install

git clone https://github.com/bmn789/astro-react-template project_name
cd project_name
npm install

Start developing

npm run dev

The dev server listens on http://localhost:3000 (see astro.config.mjs).

Command	Description
npm run dev	Local development
npm run build	Production build to ./dist/
npm run preview	Serve the production build locally
npm run astro	Astro CLI (e.g. npm run astro check)

Stack in this repo

• Astro — pages and layouts under src/pages/ and src/layouts/.
• React — @astrojs/react; use .tsx components where you need client interactivity (client:* directives as needed).
• Tailwind CSS v4 — configured via @tailwindcss/vite in astro.config.mjs; global styles in src/styles/global.css.
• shadcn/ui — components.json points UI to src/components/ui and utilities to src/lib/utils.ts. Path alias @/ maps to src/ (see tsconfig.json and Vite resolve.alias).

Adding shadcn components

From the project root (where components.json lives):

npx shadcn@latest add button

Replace button with the component you need. Import in Astro or React using the @/ alias, for example @/components/ui/button.

Learn more

• Astro + React
• Tailwind v4 with Vite
• shadcn/ui