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 extras

Everything in this section is optional. Skip it and FluentUI Svelte works as it is; come back when you need it.

Optional CSS files

Optional

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' */

Optional: Fluent UI icons

Optional

FluentUI Svelte already depends on fluentui-icons-svelte, more than 6,000 Fluent UI icons as Svelte 5 components. Install it in your app to use the icons yourself, for example inside a button or a badge. Package managers that do not hoist dependencies, like pnpm, only let you import it when it is a direct dependency.

  1. Install the icons

    NPM:

    npm i -D fluentui-icons-svelte

    Yarn:

    yarn add -D fluentui-icons-svelte

    PNPM:

    pnpm add -D fluentui-icons-svelte

  2. Import an icon and use it

    Import each icon from its own file, which compiles faster in development, and set its size or color with props:

    <script>
  import AddRegular from 'fluentui-icons-svelte/AddRegular.svelte';
</script>

<AddRegular width="24" height="24" />
    Browse all icons

Optional: Selawik font fallback

Optional

Optionally, embed Selawik, an open-source alternative to Segoe UI, for a similar appearance on systems where Segoe UI is not installed. The font files are not included in the npm package.

  1. Download the font files

    Download the font files below and place them in static/fonts/selawik/ in your SvelteKit project, so they are served at /fonts/selawik/. Keep the license file, including its copyright notice, with the fonts when distributing them. For other frameworks, use the equivalent public assets directory:

  2. Declare the font faces

    Add these declarations to your global src/app.css. Use the same family name for the regular (400), semibold (600) and bold (700) weights:

    @font-face {
  font-family: 'Selawik';
  src: url('/fonts/selawik/selawk.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Selawik';
  src: url('/fonts/selawik/selawksb.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Selawik';
  src: url('/fonts/selawik/selawkb.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

  3. Import the stylesheet

    Import your global stylesheet in src/routes/+layout.svelte, alongside the theme stylesheet. Include the optional typography.css stylesheet to apply the theme's font stack throughout your app:

    import 'fluentui-svelte/theme.css';
import 'fluentui-svelte/typography.css';
import '../app.css';

    The theme already defines --fs-font-family-base with Segoe UI first and Selawik in --fs-font-family-fallback, so no font token override is needed. Segoe UI remains preferred when available. If your app uses a base path or serves assets from a different URL, adjust the font URLs accordingly.

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>
Edit this Doc