Getting Started / Svelte 5 Runes
Introduction to Yaxa
The intuitive, production-grade UI component and automated SEO library for SvelteKit 2.7+ and Svelte 5 Runes. Bringing full Nuxt UI v4 & Nuxt SEO DX to the Svelte ecosystem.
Svelte 5 Runes Native
Pure runes reactivity (`$state`, `$derived`, `{#snippet}`) with SSR leak-proof class state containers and zero store overhead.
Bits UI Headless Primitives
WAI-ARIA accessibility, keyboard navigation, focus management, and collision-aware floating positioning baked into every overlay.
Tailwind Variants & CSS v4
Type-safe variant matrices via `tv()`, conflict-free class merging, CSS `@theme` variables, and harmonic radius scaling.
Solo SaaS & SEO Suite
Batteries-included Better-Auth, Drizzle ORM, Polar billing, dynamic edge `/api/og` image generation, and automated XML sitemaps.
Interactive Svelte 5 Runes Demo
$derived(count * 2) = 0 Even number
Nuxt UI vs. Yaxa Parity Matrix
| Feature Domain | Nuxt UI / Nuxt SEO | Yaxa (SvelteKit) | Status |
|---|---|---|---|
| Reactivity Model | Vue 3 Composition API (`ref`, `computed`) | $state, $derived, $props | 100% Native |
| Single Source Config | `app.config.ts` / `nuxt.config.ts` | src/site.config.ts | 100% DRY |
| Dynamic OG Card Engine | `nuxt-og-image` (Satori / Resvg) | /api/og (Zero-dep SVG) | Zero-Config |
| Robots & XML Sitemaps | `@nuxtjs/robots` & `@nuxtjs/sitemap` | createYaxaHook(config) | 1-Line Hook |
| CSS Engine | Tailwind CSS v3 / v4 | Tailwind CSS v4 (@tailwindcss/vite) | Modern |
| Headless Actions Suite | VueUse (`useTextareaAutosize`, `onClickOutside`) | use:autosize, use:clickOutside, use:portal | Headless |
| Subpath Architecture | Nuxt Layers & Modules | yaxa-svelte/auth, /server, /db, /polar | Zero-Tax |
| Syntax Engine | Shiki / Prism (WASM/Heavy) | <CodeBlock /> (Zero-WASM LaTeX/GFM/Vue/TSX) | Pure Web |
| Context & State Isolation | Vue `provide` / `inject` & Pinia | Svelte 5.40+ createContext & YaxaState | SSR Leak-Proof |
| Unified Config & Edge Deploy | Nitro / `nuxt.config.ts` | vite.config.ts + adapter-vercel | Zero-Config |
| Solo SaaS & Auth Suite | NuxtHub / Nuxt Auth | Better-Auth, Drizzle, Polar & Resend | Turnkey |