Getting Started / Quickstart

Creating a Project & Installation

Get up and running with Yaxa in your SvelteKit project in less than 2 minutes.

Create a SvelteKit project (if needed)

If you don't already have a SvelteKit app, initialize one using the official CLI:

Terminal

bash

pnpm create svelte@latest my-app

Install Yaxa and Dependencies

Install the core package, Tailwind CSS v4, and the modern @lucide/svelte icon library:

Terminal

bash

pnpm add yaxa-svelte @lucide/svelte
pnpm add -D tailwindcss @tailwindcss/vite @tailwindcss/typography

Configure Vite Plugins

Add Tailwind CSS and the yaxa() Vite plugin (for optimal SSR bundling, pre-bundling, and Tailwind validation) in your vite.config.ts:

vite.config.ts

typescript

import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite';
import { yaxa } from 'yaxa-svelte/vite';
import { defineConfig } from 'vite';
export default defineConfig({
  plugins: [
    tailwindcss(),
    sveltekit(),
    yaxa()
  ]
});

Create Site Configuration

Define branding, theme, and default SEO in src/site.config.ts:

src/site.config.ts

typescript

import { defineSiteConfig } from 'yaxa-svelte';
export const siteConfig = defineSiteConfig({
  name: 'My App',
  title: 'My App — Built with SvelteKit & Yaxa',
  description: 'Fast, accessible, modern UI.',
  url: 'https://my-app.com',
  theme: {
    accent: 'svelte',
    neutral: 'zinc',
    defaultMode: 'dark'
  }
});

Import CSS & Mount YaxaApp in Root Layout

Import yaxa-svelte/yaxa.css and wrap your application in <YaxaApp /> in src/routes/+layout.svelte:

src/routes/+layout.svelte

svelte

<script lang="ts">
  import 'yaxa-svelte/yaxa.css';
  import { YaxaApp } from 'yaxa-svelte';
  import { siteConfig } from '../site.config';
  let { children } = $props();
</script>
<YaxaApp config={siteConfig}>
  {@render children()}
</YaxaApp>

Optional

Automate SEO Routes with Server Hooks

To automatically enable /robots.txt, /sitemap.xml, /site.webmanifest, and /api/og:

src/hooks.server.ts

typescript

import { createYaxaHook } from 'yaxa-svelte';
import { siteConfig } from './site.config';
// Automatically handles /robots.txt, /sitemap.xml, /site.webmanifest, and /api/og
export const handle = createYaxaHook(siteConfig);

AI Ready

Equip AI Coding Agents with the Yaxa Guide

Give AI assistants (Google Antigravity, Gemini CLI, Cursor, Windsurf, Claude Code) complete architectural context on Yaxa's 35+ components, Svelte 5 runes patterns, and subpaths. You can download the guide directly via terminal or view the raw file at /skills.md:

Terminal

bash

# Download Yaxa UI Guide for Google Antigravity / Gemini CLI:
mkdir -p .gemini/skills/yaxa-ui-guide
curl -fsSL https://yaxa.vercel.app/skills.md -o .gemini/skills/yaxa-ui-guide/SKILL.md
# Or save as AGENTS.md for Cursor, Windsurf, or Claude Code:
curl -fsSL https://yaxa.vercel.app/skills.md -o AGENTS.md

Previous Introduction Next Site configuration