https://github.com/AREA44/astro-shadcn-ui-template
This template helps you build apps with Astro, Tailwind CSS, and shadcn/ui
https://github.com/AREA44/astro-shadcn-ui-template
astro radix-ui shadcn-ui ssg tailwindcss template
Last synced: about 1 month ago
JSON representation
This template helps you build apps with Astro, Tailwind CSS, and shadcn/ui
- Host: GitHub
- URL: https://github.com/AREA44/astro-shadcn-ui-template
- Owner: area44
- License: mit
- Created: 2023-09-15T14:59:52.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-08-19T23:00:03.000Z (about 2 months ago)
- Last Synced: 2025-08-20T00:29:51.867Z (about 2 months ago)
- Topics: astro, radix-ui, shadcn-ui, ssg, tailwindcss, template
- Language: Astro
- Homepage: https://astro-shadcn-ui-template.vercel.app
- Size: 952 KB
- Stars: 175
- Watchers: 4
- Forks: 30
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-shadcnui - Github - shadcn-ui-template.vercel.app) | ★160 | (Boilerplates & Starters)
README
# Astro shadcn/ui template
A modern starter template using [Astro](https://astro.build/), [Tailwind CSS](https://tailwindcss.com/), and [shadcn/ui](https://ui.shadcn.com/) - perfect for building fast, accessible, and themeable web apps.
---
## Getting Started
Before you begin, ensure that you have **Node.js** and **pnpm** installed.
### Setup
```bash
git clone https://github.com/area44/astro-shadcn-ui-template
cd astro-shadcn-ui-template
pnpm install
pnpm dev
```
Open your browser and go to [http://localhost:4321](http://localhost:4321) to see the app running.
## Adding Components
shadcn/ui provides pre-built, accessible UI components. To add one:
1. Follow the official [Astro installation guide](https://ui.shadcn.com/docs/installation/astro).
2. Pick a component (e.g., [Accordion](https://ui.shadcn.com/docs/components/accordion), [Dialog](https://ui.shadcn.com/docs/components/dialog)) and follow the usage instructions.
> [!NOTE]
> In Astro, an [island](https://docs.astro.build/en/concepts/islands/) is an interactive component rendered on the client. For complex or dynamic components, check [Add a Shadcn UI Component | Space Madness Stack](https://spacemadness.dev/docs/add-a-shadcn-ui-component)
If you're new to using React (or other frameworks) inside Astro, start with the [Framework Components guide](https://docs.astro.build/en/guides/framework-components/).
## License
This project is licensed under the [MIT License](LICENSE).