Astro

Create a New Astro Project

Start by initializing your new Astro project using npm. This command will launch an interactive setup process:

npm create astro@latest

During initialization, you'll be guided through several important configuration choices:

- Where should we create your new project? ./your-app-name
- How would you like to start your new project? Choose a template
- Do you plan to write TypeScript? Yes
- How strict should TypeScript be? Strict
- Install dependencies? Yes
- Initialize a new git repository? (optional) Yes/No

Take your time with these choices as they'll set up the foundation of your project.

Add React Integration

Now we'll enhance your Astro project with React support. This integration allows you to use React components seamlessly within your Astro pages:

npx astro add react

When the CLI prompts you with configuration questions, answer "Yes" to all of them. This ensures React is fully integrated with your Astro setup, including all necessary dependencies and configuration settings.

Install Tailwind CSS

Let's add Tailwind CSS to provide powerful utility-first styling capabilities:

npx astro add tailwind

This command not only installs Tailwind CSS but also sets up all the necessary configuration files and integrates it with your Astro build process.

Set Up Global Styles

Create a new directory for your styles and add the essential Tailwind directives:

mkdir src/styles

Then create src/styles/globals.css with these fundamental Tailwind imports:

@tailwind base;
@tailwind components;
@tailwind utilities;

These directives enable Tailwind's core functionality throughout your project.

Import Global Styles

Connect your global styles to your application by adding this import to your main page:

---
import '@/styles/globals.css'
---

Place this import in src/pages/index.astro to ensure your Tailwind styles are available throughout your application.

Configure Tailwind Base Styles

To prevent style duplication, update your astro.config.mjs to manage Tailwind's base styles:

export default defineConfig({
  integrations: [
    tailwind({
      applyBaseStyles: false,
    }),
  ],
});

This configuration ensures that Tailwind's base styles are only applied once, preventing any potential styling conflicts.

Set Up TypeScript Path Resolution

Enhance your development experience by configuring TypeScript path aliases in tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}

This configuration enables clean and consistent import paths throughout your project.

Initialize shadcn

Set up shadcn to access its component library:

npx shadcn@latest init

Follow the CLI prompts to configure shadcn according to your project needs. This step prepares your environment for using shadcn's pre-built components.

Add Your First Component

Install your first shadcn component. Let's start with the fundamental Button component:

npx shadcn@latest add button

This command adds the Button component and all its dependencies to your project's component library.

Implement Your First Component

Finally, put your new component to use in an Astro page:

---
import { Button } from "@/components/ui/button"
---
<html lang="en">
    <head>
        <title>Astro</title>
    </head>
    <body>
        <Button>Hello World</Button>
    </body>
</html>

This implementation demonstrates how to integrate shadcn components within your Astro pages.

Astro

On this page