Stacks Svelte

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

Documentation

The documentation hosting contract uses main for svelte.stackoverflow.design and v2 for v2.svelte.stackoverflow.design. The former beta domain redirects to the current 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