Welcome to the Astro + Shadcn Starter Template! This project is designed to help you get started quickly with Astro and Shadcn UI. It includes Tailwind CSS for styling and React for building interactive components.
- 🚀 Astro - Modern static site generator.
- 🎨 Shadcn UI - Beautifully designed components built with Radix UI and Tailwind CSS.
- 📦 Tailwind CSS - Utility-first CSS framework.
- 🔥 React - Library for building user interfaces.
Follow these instructions to set up the project locally.
Ensure you have the following installed:
-
Clone the repository:
git clone https://github.com/your-username/astro-shadcn-starter.git cd astro-shadcn-starter -
Install dependencies:
npm install
-
Start the development server:
npm run dev
Open http://localhost:3000 in your browser to see the result.
├── public # Static assets
├── src
│ ├── components # React components
│ ├────ui # Shadcn installed components
│ ├── layouts # Layout components
│ ├── pages # Astro pages
│ ├── styles # Global styles
│ └── utils # Utility functions
├── astro.config.mjs # Astro configuration
├── tailwind.config.mjs # Tailwind CSS configuration
└── package.json # Project metadata and dependencies
To add a new page, create a new .astro file in the src/pages directory.
Example:
---
import Layout from '../layouts/Layout.astro';
---
<Layout title="New Page">
<h1>New Page</h1>
<p>This is a new page.</p>
</Layout>Due to the static and island based nature of Astro, a lot of Shadcn components won't work out of the box,
some components such as the Avatar require more work on your side to enable them to work (see src/components/Avatar.tsx).
You can find useful information on this from the following links: