Skip to main content

Ship faster. Look deliberate.

For Rotating headline phrases: agencies, studios, founders who ship marketing sites that feel designed.

nexus / preview
PreviewStatic

Real template trees

Badge, Button, Input and Alert: the same primitives you ship.

Everything You Need

Reusable building blocks for professional websites; verify the assembled site before launch

Lightning Fast

Static-first architecture with client JavaScript only where features need it.

Accessibility Foundations

Semantic HTML, keyboard interaction, and screen reader patterns are built into the component system.

Multi-Language

Built-in i18n support for 5 languages with type-safe translations and automatic locale detection.

Theme System

CSS custom property design tokens with dark mode, customizable color scales, and consistent spacing.

Composable Components

Self-contained UI primitives that compose into sections, layouts, and complete pages effortlessly.

SEO Optimized

JSON-LD structured data, meta tags, sitemap generation, and social sharing out of the box.

Lab scores on this build

Honest Lighthouse scores for this homepage — not invented in marketing copy.

Generated: Oct 5, 2026, 5:56 PM

93
Mobile
99
Desktop

Lighthouse categories

Mobile vs desktop Lighthouse categories
CategoryMobileDesktop
Performance9399
Accessibility9797
Best practices100100
SEO100100

Lab run with Lighthouse simulate — same device profiles and throttling class as PageSpeed Insights. Desktop uses a stricter scoring curve than mobile; the two are not meant to match.

Frequently Asked Questions

Everything you need to know about Nexus

What is Nexus?

Nexus is a modern Astro template with composable UI components, built-in i18n support, and zero-config dark mode. It's designed for building fast, accessible, professional websites.

Do I need to know React or Vue?

No. Nexus is built entirely with Astro components. No React, Vue, or Svelte required. Just HTML-like templates with optional client-side interactivity where you need it.

Is dark mode included?

Yes. Dark mode is built in using CSS custom properties and a .dark class on the html element. Toggle it with the button in the header — it persists via localStorage.

How do I customize the theme?

All design tokens are defined as CSS custom properties in the global stylesheet. Override colors, spacing, typography, shadows, and more by editing the token values to match your brand.

Are the components accessible?

Components use semantic HTML and documented keyboard and ARIA patterns. Validate the components and combinations you ship against your accessibility requirements.

Can I use individual components?

Absolutely. Each component is self-contained and can be imported independently. Mix and match only what you need — no forced imports or unused code in your bundle.

Build something deliberate.

Clone the repo. Run pnpm dev. The impressive thing was always possible — you just had to choose it.

Proof — a photographer's studio — View the site