Astro Shadcn UI Template

Built with Astro 4, React, TypeScript, Tailwind CSS, and Radix UI primitives, this template demonstrates how to integrate shadcn/ui components into Astro's island architecture for optimal performance. Astro's unique approach loads JavaScript only for interactive components (islands), making it perfect for content-heavy sites like blogs, documentation, marketing pages, and portfolios that need occasional interactivity without the overhead of a full SPA. The template includes shadcn/ui components configured to work within Astro islands, optimized Tailwind CSS configuration for Astro's build process, TypeScript support for type-safe component development, example pages showing how to use shadcn/ui components in Astro, proper integration of Radix UI for accessibility, and optimal build configurations for production deployment.

The setup allows developers to use shadcn/ui's Button, Dialog, Dropdown, and other components within Astro's partial hydration model, shipping minimal JavaScript while maintaining rich interactivity where needed. This template is perfect for building documentation sites with interactive examples and search functionality, marketing websites with contact forms and modals, content-heavy blogs with interactive elements, portfolio sites with project galleries and filtering, and landing pages that need high performance scores with selective interactivity. The combination of Astro's speed with shadcn/ui's polish creates websites that load instantly while still providing excellent user experiences.