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 controlling CSS custom properties, typography, spacing, and border-radius tokens for Katlux components. Katlux does not differentiate between "Token Presets" and "Structural Template Presets" — any preset can be token-only (pure CSS variables), template-only, or both.

Katlux has the following ready-to-use presets:

default — A clean, neutral design system built into the toolkit.
modern — A polished, opinionated theme installable via npm (@katlux/preset-modern).
dark — A sleek, dark mode token preset installable via npm (@katlux/preset-dark).

Developers can easily scaffold custom presets using the toolkit CLI:

Bash

npx @katlux/toolkit create-preset cyber-brand --base=modern

When inheriting from a base preset, no files are copied — Katlux handles fallback dynamically via priority cascade.

Presets are extremely powerful for:

SaaS Branding: Programmatically swap presets per-tenant to match their brand colors and typography.
White Label Applications: Create generic applications that can be instantly re-themed for different clients without duplicating the codebase.

To use an official preset such as modern, install the preset package alongside the toolkit:

Bash

npm install @katlux/preset-modern@alpha

Then register the preset in nuxt.config.ts (it will automatically install and register @katlux/toolkit):

TypeScript

// nuxt.config.ts
export default defineNuxtConfig({
    modules: [
        '@katlux/preset-modern'
    ]
})

Declare the list of available presets and set the active one in app.config.ts. You can set activePreset as a single string or an array of strings to enable multiple presets simultaneously.

When passing an array, presets form a priority stack where the leftmost entry has highest priority. Any missing component styles or tokens automatically fall back to presets to the right, and ultimately to default.

TypeScript

// app.config.ts
export default defineAppConfig({
    katluxToolkit: {
        presetList: [
            { name: 'Default', value: 'default' },
            { name: 'Modern',  value: 'modern'  },
            { name: 'Dark',    value: 'dark'    },
            { name: 'Cyber Brand', value: ['cyber-brand', 'modern'] }
        ],
        // Presets cascade: cyber-brand overrides modern, then falls back to default
        activePreset: ['cyber-brand', 'modern']
    }
})

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