Presetting

Katlux Presetting lets you define the entire visual identity of your component library without touching markup. Presets are declared once in app.config.ts and applied globally — every K* component reads from the active preset automatically.

Description

A preset is a named visual configuration that controls the CSS Custom Properties, typography, spacing, and border-radius tokens for every Katlux component. Switching presets at runtime re-themes the entire application instantly.

Katlux ships with two ready-to-use presets:

default — A clean, neutral design system.
modern — A polished, opinionated theme from the @katlux/preset-modern package.

You can create your own preset by defining a folder of SCSS files following the Katlux preset contract, registering it in nuxt.config.ts, and listing it in app.config.ts.

To use a built-in preset such as modern, install the preset package alongside the toolkit:

Bash

npm install @katlux/toolkit @katlux/preset-modern

Then register both as Nuxt modules and add the style alias so Vite resolves precompiled CSS:

TypeScript

// nuxt.config.ts
export default defineNuxtConfig({
    modules: [
        '@katlux/toolkit',
        '@katlux/preset-modern',
        // Remap SCSS imports to the compiled CSS counterpart
        (_, nuxt) => {
            nuxt.hook('app:resolve', () => {
                nuxt.options.css = nuxt.options.css.map(path =>
                    path.includes('@katlux/preset-modern')
                        ? path.replace('.scss', '.css')
                        : path
                )
            })
        }
    ],
    vite: {
        resolve: {
            alias: {
                '@katlux/preset-modern/dist/runtime/assets/scss/index.scss':
                    '@katlux/preset-modern/dist/runtime/assets/scss/index.css'
            }
        }
    }
})

Declare the list of available presets and set the active one in app.config.ts:

TypeScript

// app.config.ts
export default defineAppConfig({
    katluxToolkit: {
        presetList: [
            { name: 'Default', value: 'default' },
            { name: 'Modern',  value: 'modern'  }
        ],
        activePreset: 'modern'
    }
})

All K* components automatically pick up the active preset. You can switch presets at runtime using the useTemplate() composable or by mutating the app config.