Install the packages
Install the component package, SASS, and the Vite plugin that generates Fractalsvelte’s numeric utility classes.
pnpm add fractalsvelte fractals-styler
pnpm add -D sass
npm works as well:
npm install fractalsvelte fractals-styler
npm install -D sass
Configure Vite
Add the Fractals Styler plugin alongside SvelteKit’s plugin in vite.config.ts.
import { sveltekit } from '@sveltejs/kit/vite';
import fractalsStyler from 'fractals-styler';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit(), fractalsStyler()]
});
The plugin scans your application source for classes such as gap16, pad32, and width128, and emits only the utility rules that your app uses.
Load the styles once
In the root layout, import the generated utility stylesheet and the Fractalsvelte SASS entry point once before rendering the application.
<script lang="ts">
import 'virtual:fractals-styler.css';
import 'fractalsvelte/styles/index.sass';
let { children } = $props();
</script>
{@render children()}
The SASS entry point provides the base tokens, layout primitives, typography, buttons, and component-level shared styles. Your application can override its tokens after this import.
Verify the setup
Render a component in any page or component:
<script lang="ts">
import { Button } from 'fractalsvelte';
</script>
<Button onclick={() => console.log('Ready')}>Get started</Button>
If it renders with the expected border, spacing, and typography, the package and stylesheet are connected correctly.
Fractalsvelte has Svelte and SvelteKit peer dependencies. Keep those dependencies in your application rather than relying on a nested copy from another package.