ayrax is a thin layer on top of Astro. it ships a typed component library, a motion system, Lenis smooth scrolling, strict TypeScript defaults and a CLI with no build step of its own. Pages are static HTML, React only runs inside islands you opt into.
- the platform first.: native
<dialog>,<details>and form elements instead of reimplementations. - static by default.: zero JavaScript until you add a client directive.
- ship source, not builds.:
@ayrax/corepublishes its TypeScript sources, your Astro build compiles them. - no telemetry.: the integration even disables Astro.
- few, sharp tools.: one way to style (StyleX), one way to animate (Motion), one way to smooth-scroll (Lenis).
- 18 accessible components styled with StyleX (
@ayrax/core/ui) - motion props and named presets on every component
- lenis smooth scroll with anchor links and snap points, initialized once
- dark/light theming via CSS variables, applied before first paint
- security headers, HTML sanitization, env validation, typed actions
- cookie-consent island for GDPR-friendly setups
- typed API client,
useQuery, content utilities - CLI:
init,dev,build,preview, component and page generators
@ayrax/core: components, hooks, integration@ayrax/cli: dev toolscreate-ayrax-app: project generator
npx create-ayrax-app my-app
# or with pnpm: pnpm create ayrax-app my-app
cd my-app
pnpm install
# or with npm: npm install
pnpm dev
# or with npm: npm run devNote
requirements: node 20+, pnpm 10 (or npm 10).
a freshly scaffolded app is already complete, src/pages/index.astro renders
inside a BaseLayout that wires the theme, Lenis and the SEO head for you.
to add Ayrax to an existing Astro site instead:
pnpm add @ayrax/coreimport { defineConfig } from "astro/config";
import react from "@astrojs/react";
import ayrax from "@ayrax/core/integration";
export default defineConfig({
integrations: [react(), ayrax()],
});| file | route |
BSD-3-Clause © 2026 nashiuso
| ------------------------- | -------------- |
| pages/index.astro | / |
| pages/blog/index.astro | /blog |
| pages/blog/[slug].astro | /blog/hello |
| pages/404.astro | not-found page |
| pages/api/health.ts | endpoint |
| command | does |
BSD-3-Clause © 2026 nashiuso
| ---------------------------- | ------------------------------------------ |
| ayrax init <dir> | scaffold a new project |
| ayrax dev | astro dev |
| ayrax build | astro build |
| ayrax preview | astro preview |
| ayrax add component <name> | generate a typed component + StyleX styles |
| ayrax add page <name> | generate a page wired to your layout |
guides live in apps/docs, deployable as a static site:
install - routing - layouts - configuration - cli - components - styling -
motion - lenis - images - content - deployment - examples - security -
privacy - migration - philosophysixteen minimal, single-concept examples live in
apps/playground/src/pages/examples and
are rendered by the playground app: button, card, hero, layout, grid, navbar,
footer, motion animation, scroll animation, Lenis integration, responsive page,
landing page, markdown page, blog page, portfolio page and dashboard.
issues and PRs are welcome at github.com/nashiuso/ayrax.
git clone https://github.com/nashiuso/ayrax.git
cd ayrax
pnpm install
# or with npm: npm install
pnpm build # build both apps
pnpm check # astro check, must stay at 0 errors
pnpm test # vitest
pnpm test:e2e # playwrightkeep the philosophy: minimal, correct, no magic. every addition must justify itself.
BSD-3-Clause © 2026 nashiuso
嘘 無 し ,
Nashi Uso .