An implementation of Microsoft Fluent UI v9 for Svelte framework
npm install @svelte-fui/coreshell
// 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
``