INSTALLATION · SVELTEKIT

Using SvelteKit

Register the Coordiation Vite adapter beside SvelteKit, scan the src tree, and load the generated stylesheet from the root layout.

✓

The default scanner reads .svelte, JavaScript, TypeScript, HTML, Markdown, and MDX files without an additional extractor.

Install Coordiation

SvelteKit already includes Vite. Add the compiler and the official Vite adapter.

Terminal

npm install -D @coordiation/css @coordiation/vite

Register both Vite plugins

Keep sveltekit() and add Coordiation as a pre-transform plugin.

vite.config.ts

import { sveltekit } from "@sveltejs/kit/vite";
import coordiation from "@coordiation/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    coordiation({
      content: ["src"],
      cssFile: "src/coordiation.css"
    }),
    sveltekit()
  ]
});

Create the CSS entry

Use one watched stylesheet for framework generation and theme ownership.

src/coordiation.css

@coordiation;

@co-theme {
  --co-color-brand-500: oklch(62.3% 0.214 259.815);
}

Load it from the root layout

A root layout keeps the generated stylesheet active across every SvelteKit route.

src/routes/+layout.svelte

<script>
  import "virtual:coordiation.css";
  let { children } = $props();
</script>

{@render children()}

Use utilities in components

Keep conditional variants as complete class strings so the compiler can discover them.

src/routes/+page.svelte

<main class="co-grid co-min-h-screen co-place-items-center co-bg-black co-text-white">
  <h1 class="co-text-6xl co-font-bold">Built with Coordiation</h1>
</main>

Terminal

npm run dev
npm run build

PRODUCTION CHECKLIST

Ship predictable CSS

Keep the scanner boundary and generated stylesheet explicit so people, CI, and AI agents produce the same result.

Open SvelteKit documentation →

Import virtual:coordiation.css only once from the highest shared layout.
Keep component libraries inside the configured content boundary.
Map Svelte conditional classes to complete strings or add the finite set to a safelist.
Validate the adapter with the same npm run build command used by your deployment target.

Previous← Using Laravel NextUsing HTML and CSS →