Skip to main content
Theme 03 — Aurora

The Ultimate
Astro Showcase

Island Architecture, View Transitions, and Zero JS by default — wrapped in glassmorphism and Aurora-gradient aesthetics.

Explore Islands All Themes
Capabilities

What This Demo Shows

Island Architecture

React, Vue, Svelte coexisting on one page with selective hydration.

View Transitions

Native browser morphing for page navigation with zero JS overhead.

Zero JS Default

Static by default. Islands activate only when scrolled into view.

100/100 Lighthouse

All four Lighthouse categories maxed out through Astro-native patterns.

Live Islands

Interactive Components

Each island below is an independent component — React, Vue, or Svelte — hydrating on its own schedule.

React · client:visible

React Counter

Simple useState demo — the most basic island.

0

Framework: React · Hydration: client:visible
React · client:visible

React Tab Switcher

Conditional rendering with useState.

Astro renders your components to static HTML at build time. No JavaScript is shipped unless you opt in with a client: directive.

Framework: React · Hydration: client:visible
Svelte · client:load

Svelte Animated Card

Built-in transitions — no animation library needed.

Framework: Svelte · Hydration: client:visible
Vue · client:visible

Vue Reactive Form

Two-way data binding with Vue's reactivity system.

Live preview: … · …

Framework: Vue · Hydration: client:visible