@svelte-fui/core

Contains all the necessary UI component of the Fluent Design System (Still under development)

Usage

Add @fluentui/react-components to a project:

``

shell

// pnpm

pnpm install @svelte-fui/core



//npm

npm install @svelte-fui/core





To use Fluent design for Sveltekit app you have to make

App component at the top level route, ex: /routes/+layout.svelte

html





Using FUI preset fot TailwindCSS 



This will allow you to integrate FUI tokens into your TailwindCSS config.

bash

// pnpm

pnpm install @svelte-fui/tailwindcss



//npm

npm install @svelte-fui/tailwindcss

js

// tailwindcss.config.js



import { fuiPreset } from '@svelte-fui/tailwindcss';



/* @type {import('tailwindcss').Config} /

export default {

	presets: [fuiPreset],

	content: ['./src/*/.{html,js,svelte, stories.svelte, ts}']

};





Now in your

.svelte

 file you can use FUI tokens as tw classes:

html



Use Pre-Defined Themes

bash

// pnpm

pnpm install @svelte-fui/themes



//npm

npm install @svelte-fui/themes

html