API

UIProvider

The root of a Sveltier app: theme, defaults, breakpoints and locale in one component.

Props

Name	Type	Default	Description
`themes`	`Record<string, ThemeDefinition>`	`–`	Required. The registered themes, for example monolith or { ...monolith, ...maison }. An app ships only the packs it registers.
`theme`	`'system' \| string`	`'system'`	The theme to show, or "system" to follow prefers-color-scheme. Bindable.
`light / dark`	`string`	`first light / dark theme`	The pair used by "system" and toggle().
`storageKey`	`string \| false`	`'sv-theme'`	Where the theme choice is remembered and restored before first paint. false turns it off.
`nonce`	`string`	`–`	CSP nonce for the generated <style> and <script>.
`defaults`	`DefaultsConfig`	`–`	Default props for every component below: global, and per component.
`display`	`DisplayOptions`	`–`	Breakpoint thresholds, the mobile breakpoint and the width assumed on the server (ssrWidth). Read once.
`locale`	`LocaleOptions`	`–`	Locale, currency, time zone and messages. Changes apply at once.
`children`	`Snippet`	`–`	The app.

Example

+layout.svelte

<!-- src/routes/+layout.svelte -->
<script>
  import { UIProvider } from 'sveltier';
  import { monolith } from 'sveltier/themes/monolith';
  let { children } = $props();
</script>

<!-- Monolith, light or dark following the OS -->
<UIProvider themes={monolith}>
  {@render children()}
</UIProvider>

What it renders

It gives everything below it the display and locale settings, then renders a root ThemeProvider around a DefaultsProvider. Neither renders an element. Use one UIProvider at the root; inside it, a nested ThemeProvider or DefaultsProvider changes the theme or defaults of a section.

See Quick start for the setup, and ThemeProvider for theme scopes.