S Svelora

Theme & Config

Customization

Configure global defaults, icons, and component slots when you need project-wide consistency.

Custom Component Defaults

Create a config file to change default props for all instances.

import { defineConfig } from 'svelora';

defineConfig({
 button: {
  defaultVariants: { variant: 'outline', color: 'secondary', size: 'sm' }
 },
 avatar: {
  defaultVariants: { size: 'lg' }
 }
});

Then import it in your root layout.

<script lang="ts">
 import './layout.css';
 import '../lib/config';
 import { ModeWatcher } from 'mode-watcher';

 let { children } = $props();
</script>

Reset Config

import { resetConfig } from 'svelora';

resetConfig();

Fonts Provider Defaults

Configure top-level `fonts` once, then render a single `<Fonts />` in your root layout.

import { defineConfig } from 'svelora';

defineConfig({
 fonts: {
  families: [
   { name: 'Inter', variable: '--font-sans-family', weights: [400, 500, 600, 700] },
   { name: 'Poppins', variable: '--font-heading-family', weights: [600, 700] },
   { name: 'JetBrains Mono', variable: '--font-mono-family', weights: [400, 500, 700] },
   {
    provider: 'local',
    name: 'Sarabun',
    variable: '--font-sarabun-family',
    sources: [{ src: '/fonts/Sarabun-Regular.woff2', format: 'woff2', weight: 400 }]
   }
  ]
 }
});
import { defineConfig } from 'svelora';

defineConfig({
 fonts: false
});

Customizing Variants

Add new variants or modify existing ones in the component variant definitions.

// src/lib/Button/button.variants.ts
export const buttonVariants = tv({
 variants: {
  variant: {
   solid: '',
   outline: '',
   soft: '',
   gradient: ''
  }
 },
 compoundVariants: [
  {
   variant: 'gradient',
   color: 'primary',
   class: { base: 'bg-linear-to-r from-primary to-tertiary text-on-primary' }
  }
 ]
});