A faithful implementation of Microsoft's Fluent Design System in Svelte.

Usage no npm install needed!

<script type="module">
  import fluentSvelte from 'https://cdn.skypack.dev/fluent-svelte';


Fluent Svelte

Warning: This project is still in alpha stages. It is NOT production ready and heavily undocumented. Expect regular breaking changes.

What is this?

fluent-svelte is an experimental Svelte component UI library that emulates the look and feel of Microsoft's Windows UI Controls which conform to the Fluent Design System.


  • SvelteKit and SSR Compatible
  • TypeScript and type definitions are supported, but optional.
  • Full RTL support with no additional configuration.
  • All components are accessible according to WAI-ARIA standards.
  • Theming support using CSS custom properties.
  • Minimal third-party dependency usage.
  • Reduced motion support.
  • Easy setup. Just install the library, add some base styles, and you're ready to go.
  • Minimal CSS overhead. Styles are included and scoped alongside their respective components, only bundling the CSS you need.