@stackoverflow/stacks-svelte

Stacks Svelte

This package is an implementation of the Stacks Design System, using Svelte Components.

Documentation

Installation

Stacks Svelte can be installed via npm:

npm install @stackoverflow/stacks-svelte

@stackoverflow/stacks-svelte relies on @stackoverflow/stacks styles. For example in a SvelteKit application you should add the following to your src/routes/+layout.svelte file to expose stacks.css

<script>
    import "@stackoverflow/stacks/dist/css/stacks.min.css";
</script>

<slot />

Usage

Anywhere in your Svelte components:

<script>
    import { Button } from "@stackoverflow/stacks-svelte";
</script>

<Button>Click me</Button>

We also have a selection of Svelte Actions you can access directly:

<script>
    import { clickOutside } from "@stackoverflow/stacks-svelte/actions";
</script>

<div
    use:clickOutside
    onoutclick={() => console.log("click outside my container")}
>
    My container
</div>

Known issues

• Stories only supports a limited number (14?) Svelte each blocks. Exceeding this number will break story controls. See https://github.com/storybookjs/addon-svelte-csf/issues/110
• Svelte components events are shown in stories but documentation needs to be added manually