@svelte-fui/core v1.0.0-alpha.20
@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:
// 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
<script>
import { App, Button } from '@svelte-fui/core';
// This is ude in tailwindcss project or you can ignore and use your tailwindcss setup stylesheet, it should work fine
import '@svelte-fui/core/styles/root';
// Uncomment the file import if you want to use the library outside a tailwindcss project
//import '@svelte-fui/core/styles/compiled';
</script>
<App>
<Button>Hello World!</Button>
</App>
Using FUI preset fot TailwindCSS
This will allow you to integrate FUI tokens into your TailwindCSS config.
// pnpm
pnpm install @svelte-fui/tailwindcss
//npm
npm install @svelte-fui/tailwindcss
// 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:
<!-- src/routes/+page.svelte -->
<script>
// some logic goes here
</script>
<!-- -->
<div class="bg-neutral-background-1 text-neutral-foreground-1 font-base-400">
<!-- UI contents goes here -->
</div>
Use Pre-Defined Themes
// pnpm
pnpm install @svelte-fui/themes
//npm
npm install @svelte-fui/themes
<script>
import { webLightTheme, webDarkTheme } from '@svelte-fui/themes';
import { App, Button } from '@svelte-fui/core';
let theme = webLightTheme;
onMount(() => {
function handler(schemeMedia) {
theme = schemeMedia.matches ? webLightTheme : webDarkTheme;
}
const schemeMedia = matchMedia('(prefers-color-scheme: light)');
schemeMedia.addEventListener('change', handler);
theme = schemeMedia.matches ? webLightTheme : webDarkTheme;
return () => {
schemeMedia.removeEventListener('change', handler);
};
});
</script>
<App {theme}>
<Button>Fluent UI for Svelte</Button>
</App>
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago