Skip to content

GenieX-AI/UltimateAstroTemplate

 
 

Repository files navigation

🚀 Ultimate Astro - Modern Multi-Framework Showcase

Ultimate Astro

Astro

Available at

Astro React Svelte Vue.js Solid TypeScript TailwindCSS

🌟 Overview

Ultimate Astro is a cutting-edge template that seamlessly integrates multiple frontend frameworks within the Astro ecosystem. Perfect for developers who want to experiment with different frameworks or build hybrid applications.

🚀 Quick Start

  1. Clone and Install

     git clone https://github.com/Marve10s/UltimateAstroTemplate.git
     cd UltimateAstroTemplate
     npm install

    Or Fork and Install

    1.1 Click the 'Fork' button in the top right corner of this repository

    1.2 Clone your forked repository

     git clone https://github.com/YOUR_USERNAME/UltimateAstroTemplate.git

    1.3 Navigate and install dependencies

     cd UltimateAstroTemplate && npm install
  2. Development

     npm run dev
  3. Build

     npm run build

📁 Project Structure

/
├── public/          # Static assets
├── src/
│   ├── assets/      # Project assets
│   ├── components/  # UI components
│   │   ├── Astro/   # Astro components
│   │   ├── React/   # React components
│   │   ├── Solid/   # Solid components
│   │   ├── Svelte/  # Svelte components
│   │   ├── Vue/     # Vue components
│   │   └── ui/      # Shared UI components
│   ├── data/        # Data files
│   ├── icons/       # Icon components
│   ├── layouts/     # Layout templates
│   ├── pages/       # Route pages
│   └── styles/      # Global styles
└── package.json

📊 Performance

PageSpeed Desktop

Metric Score
🚀 Performance 99/100
♿ Accessibility 97/100
🏗️ Best Practices 100/100
🔍 SEO 100/100

View Full Report

🛠️ Customization

Styling

Modify tailwind.config.cjs to customize:

  • 🎨 Color schemes
  • 📱 Breakpoints
  • 🔤 Typography
  • 🎯 Custom utilities

Components

  • Add framework-specific components in respective directories
  • Use shared components in ui/ for cross-framework functionality
  • Leverage Astro's partial hydration with client:* directives

🎨 Share Your Creation

Have you modified my template? I'd love to see it! Share your creation with me:

  • Create a GitHub issue with screenshots and demo link
  • Message me on Telegram with your project details

All theme contributions will be reviewed and credited appropriately.

🌟 Community Showcases

Check out these amazing modifications by our community:

Your creation could be featured here! Share your work with me.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.


Made with ❤️ using Astro

Releases

No releases published

Packages

No packages published

Languages

  • Astro 33.9%
  • Vue 21.0%
  • JavaScript 19.2%
  • TypeScript 13.5%
  • Svelte 12.1%
  • CSS 0.3%