enes

Getting Started

This page will guide you through the process of installing and using FluentUI Svelte.

Installation

To install FluentUI Svelte, run one of the following commands:

NPM:

npm i -D fluentui-svelte

Yarn:

yarn add -D fluentui-svelte

PNPM:

pnpm add -D fluentui-svelte

Required CSS files

You need to import the CSS files in your project. You can do this by adding the following line to your main +layout.svelte file:

import 'fluentui-svelte/theme.css';
  • You can override the CSS variables by defining them in your app CSS file.
  • Or, you can also copy the CSS file from the dist folder and include it in your project directly if you want to modify it.

Optional CSS files

You can also import the optional CSS files that provide additional styles like `typography`, `dark-mode` and a basic `reset`:

import 'fluentui-svelte/reset.css'; /* Dont use if you already have a reset in your project. Ej: Using TailwindCSS */
import 'fluentui-svelte/typography.css';
import 'fluentui-svelte/media-darkmode.css'; /* Or:  import 'fluentui-svelte/class-darkmode.css' */

Provider Setup

Wrap your app with the FluentUISvelte provider in your root +layout.svelte file. It creates the shared context that components read for theme, reduced motion and keyboard navigation:

<script>
  import { FluentUISvelte } from 'fluentui-svelte';

  let { children } = $props();
</script>

<FluentUISvelte>
  {@render children?.()}
</FluentUISvelte>

The provider is optional, but a few features only work while it is mounted:

  • Theme: the current theme is shared through the provider, so every component reacts to a theme change at the same time.
  • Reduced motion: the provider stores the preference chosen inside your app and falls back to the operating system setting. Without it, components can only follow the system setting.
  • Keyboard navigation: arrow keys and roving focus in components such as the auto suggest box, the calendar view and the dropdown rely on the Tabspot instance the provider creates.

Import Components

To use FluentUI Svelte components, you need to import them in your Svelte files. Here is an example of how to import and use a Button component:

<script>
  import { Button } from 'fluentui-svelte';
</script>

Importing as Namespace

You can also import all components as a namespace, which allows you to access them with a prefix:

<script>
  import * as FluentUISvelte from 'fluentui-svelte';
</script>

<FluentUISvelte.Button>
  Click me
</FluentUISvelte.Button>