Getting Started

This page will guide you through the process of adding fluent-svelte to your existing Svelte project. If you don’t have a Svelte or SvelteKit project already, you can create one using this guide.

Step 1: Install the Library

This will install fluent-svelte and it’s required dependencies. This can be done using a package manager of your choice.

Step 2: Add Theme File

Fluent Svelte components use a set of common resources to style their elements. These values are defined in a theme file that must be imported into your project before components can render properly.

src/App.svelte (or src/routes/__layout.svelte if using SvelteKit)

<script>
	import "fluent-svelte/theme.css";
</script>

Alternatively, you can import the theme file from a CDN (though this generally isn’t recommended).

<style>
	@import url("https://unpkg.com/fluent-svelte/theme.css");
	/* ...or @import url("https://cdn.jsdelivr.net/npm/fluent-svelte/theme.css"); */
</style>

Step 3: Importing a Component

Components are exported from a single index file in the library. They can be imported and used in your project like so:

<script>
	import { Button, Checkbox } from "fluent-svelte";
</script>

<button>Click me!</button>
<Checkbox>Check me!</Checkbox>

Alternatively you can import under a namespace:

<script>
	import * as Fluent from "fluent-svelte";
</script>

<Fluent.Button>Click me!</Fluent.Button>
<Fluent.Checkbox>Check me!</Fluent.Checkbox>

Svelte REPL Usage

fluent-svelte components can also be imported into the Svelte REPL.

In the REPL, packages are automatically installed by name when using an import statement, so the installation step can be skipped. Because the REPL doesn’t support importing CSS in node_modules, we’ll need to import the theme file through a CDN.

<script>
	import { Button, Checkbox } from "fluent-svelte";
</script>

<button>Click me!</button>

<style>
	@import url("https://unpkg.com/fluent-svelte/theme.css");

	/* Some base styles to get things looking right. */
	:global(body) {
		background-color: var(--fds-solid-background-base);
		color: var(--fds-text-primary);
	}
</style>