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

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>