UltimateAstroTemplate Svelte Themes

Ultimateastrotemplate

Astro Template that uses React,Solid,Vue and Svelte all in one piece

πŸš€ Ultimate Astro - Modern Multi-Framework Showcase

🌟 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
    

⭐ Star Power

πŸ“ 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

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:

All theme contributions will be reviewed and credited appropriately.

🌟 Community Showcases

Check out these amazing modifications by our community:

Ismael TreviΓ±o - Modified background to have different orb colors | Changes are live! βœ…

Ismael TreviΓ±o - Added DevContainer | Changes are live! πŸš€

πŸ“„ License

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


Made with ❀️ using Astro

Top categories

Loading Svelte Themes