Svelte Themes Logo Svelte Themes
Fluent Svelte Extra screenshot

Fluent Svelte Extra

Author Avatar Theme by Openanime
Updated: 18 Jan 2026
60 Stars

A fork of fluent-svelte which is in active development

Github

Categories

Scss Ui kits & component libraries

Overview

Fluent-svelte-extra is a fork of fluent-svelte that is currently in active development. This variant offers additional components and features compared to the original library. One notable feature includes the ability to switch between dark and light themes, enhancing customization options for users.

Features

  • Undocumented Components: Developers can access components that are not included in the official documentation.
  • Switching between themes: Users can easily switch between dark and light themes by importing fluent-svelte-extra/switchable.css into their layout.svelte file and applying specific classes to the <html> tag in the app.html file.
  • Enhanced Components: The library provides new components and enhancements beyond the original fluent-svelte offering.

Installation

To install fluent-svelte-extra and enable theme switching, follow these steps:

  1. Import fluent-svelte-extra/switchable.css in your layout.svelte file.
  2. Add fds-theme-dark or fds-theme-light classes to the <html> tag in your app.html file.
  3. Utilize fluent-svelte-extra/theme.css to use the system default theme, and apply fds-theme-dark or fds-theme-light classes as needed.

Summary

Fluent-svelte-extra offers a valuable extension to the fluent-svelte library by providing additional components and theme customization options. Developers can leverage this fork to access undocumented components, enhance their project’s design with themes, and benefit from ongoing development efforts. By following the installation guide, users can seamlessly integrate fluent-svelte-extra into their projects and enjoy its extended features.