Installation

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

npm install @geoffcox/sterling-svelte

yarn add @geoffcox/sterling-svelte

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

<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>

Use the Sterling theme (optional)

1. Add the sterling-svelte-themes package

npm install @geoffcox/sterling-svelte-themes

yarn add @geoffcox/sterling-svelte-themes

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

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

The Sterling theme automatically switches betweens light and dark modes.

How to use the Sterling theme in a REPL

If you are in the Svelte playground or another project where you cannot import CSS from the sterling-svelte-themes package, you can use this alternative:

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

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

<div class="sterling-theme">
  <Button>Hello sterling-svelte</Button>
</div>