Installation

In your Svelte application, use your favorite package manager to install sterling-svelte.

npm install @geoffcox/sterling-svelte

yarn add @geoffcox/sterling-svelte

Add sterling-svelte components. You can import each component from their .svelte file or multiple from the library.

<script>
  import Button from '@geoffcox/sterling-svelte/Button.svelte';
  import { Checkbox } from '@geoffcox/sterling-svelte';
</script>

<div>
  <Button>Hello sterling-svelte</Button>
  <Checkbox>Ready</Checkbox>
</div>

Apply the Sterling theme (optional & recommended)

If you don't have your own theme for sterling-svelte, it is recommended to use the Sterling theme.

Add the sterling-svelte-themes package

npm install @geoffcox/sterling-svelte-themes

yarn add @geoffcox/sterling-svelte-themes

In the root of your applications (+layout.svelte), import the Sterling theme.

import '@geoffcox/sterling-svelte-themes/sterling.css';

Set either light-mode or dark-mode on the root of your application.

<html class="light-mode"></html>

Support light and dark modes (optional)

Import the applyLightDarkMode action in the script section.

import { applyLightDarkMode } from '@geoffcox/sterling-svelte';

// TODO: Provide UI to toggle this between auto, light, or dark.
let mode = $state('auto');

Use applyLightDark mode on the top-level div of your application.

Recommended: Specify atDocumentRoot: true to apply the class at the root of the HTML document. This ensure styles are applied to floating UI appending to the body element's children.

<div use:applyLightDarkMode={{atDocumentRoot: true, mode}}>
  ...
</div>

How to use the Sterling theme in Svelte REPL

If you are working in the svelte.dev REPL or another project where you cannot import CSS from Svelte components, you can use this alternative:

<svelte:head>
  <link href="https://unpkg.com/@geoffcox/sterling-svelte-themes/css/sterling.css" rel="stylesheet">
</svelte:head>