{"id":23107912,"url":"https://github.com/ryu-man/svelte-fui","last_synced_at":"2025-08-16T17:32:03.076Z","repository":{"id":164593338,"uuid":"632673044","full_name":"ryu-man/svelte-fui","owner":"ryu-man","description":"An implementation of Microsoft Fluent UI v9 for Svelte framework","archived":false,"fork":false,"pushed_at":"2024-05-23T01:12:30.000Z","size":2023,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-23T01:45:37.518Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://svelte-fui.vercel.app","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryu-man.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-25T22:34:48.000Z","updated_at":"2024-06-03T03:36:05.317Z","dependencies_parsed_at":null,"dependency_job_id":"91fed118-49a2-404a-a152-308666109788","html_url":"https://github.com/ryu-man/svelte-fui","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryu-man%2Fsvelte-fui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryu-man%2Fsvelte-fui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryu-man%2Fsvelte-fui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryu-man%2Fsvelte-fui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryu-man","download_url":"https://codeload.github.com/ryu-man/svelte-fui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230047181,"owners_count":18164575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-17T01:16:26.508Z","updated_at":"2024-12-17T01:16:26.985Z","avatar_url":"https://github.com/ryu-man.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svelte Fluent UI\n\nThe primary objective of this exciting project is to seamlessly integrate Microsoft's highly anticipated Fluent UI version 9 with the powerful Svelte framework. By combining these cutting-edge technologies, we aim to deliver a truly exceptional user interface experience that is not only visually stunning but also incredibly intuitive and user-friendly.\n\nFluent UI, originally developed by Microsoft for the React library, is a comprehensive design system offering a vast collection of reusable components, meticulously crafted icons, and stylish themes that effortlessly align with Microsoft's acclaimed Fluent Design System.\n\nWith this integration, developers will have access to a rich toolkit that empowers them to create stunning and modern user interfaces with ease, revolutionizing the way we interact with software applications. Get ready to embark on a journey of innovation and elevate your UI development to new heights!\n\n**Please be noticed that this project is still in early development stage, so it's not ready to be used in production yet**.\n\n# Usage\n\nAdd @fluentui/react-components to a project:\n\n```shell\n// pnpm\npnpm install @svelte-fui/core\n\n//npm\nnpm install @svelte-fui/core\n```\n\nTo use Fluent design for Sveltekit app you have to make `App` component at the top level route, ex: `/routes/+layout.svelte`\n\n```html\n\u003cscript\u003e\n\timport { App, Button } from '@svelte-fui/core';\n\n\t// This is ude in tailwindcss project or you can ignore and use your tailwindcss setup stylesheet, it should work fine\n\timport '@svelte-fui/core/styles/root';\n\n\t// Uncomment the file import if you want to use the library outside a tailwindcss project\n\t//import '@svelte-fui/core/styles/compiled';\n\u003c/script\u003e\n\n\u003cApp\u003e\n\t\u003cbutton\u003eHello World!\u003c/button\u003e\n\u003c/App\u003e\n```\n\n# Using FUI preset fot TailwindCSS\n\nThis will allow you to integrate FUI tokens into your TailwindCSS config.\n\n```bash\n// pnpm\npnpm install @svelte-fui/tailwindcss\n\n//npm\nnpm install @svelte-fui/tailwindcss\n```\n\n```js\n// tailwindcss.config.js\nimport { fuiPreset } from '@svelte-fui/tailwindcss';\n\n/** @type {import('tailwindcss').Config} */\nexport default {\n\tpresets: [fuiPreset],\n\tcontent: ['./src/**/*.{html,js,svelte, stories.svelte, ts}']\n};\n```\n\nNow in your `.svelte` file you can use FUI tokens as tw classes:\n\n```html\n\u003c!-- src/routes/+page.svelte --\u003e\n\u003cscript\u003e\n\t// some logic goes here\n\u003c/script\u003e\n\n\u003c!--  --\u003e\n\n\u003cdiv class=\"bg-neutral-background-1 text-neutral-foreground-1 font-base-400\"\u003e\n\t\u003c!-- UI contents goes here --\u003e\n\u003c/div\u003e\n```\n\n# Use Pre-Defined Themes\n\n```bash\n// pnpm\npnpm install @svelte-fui/themes\n\n//npm\nnpm install @svelte-fui/themes\n```\n\n```html\n\u003cscript\u003e\n\timport { App, Button } from '@svelte-fui/core';\n\timport { webDarkTheme, webLightTheme } from '@svelte-fui/themes';\n\n\tlet theme = webLightTheme;\n\n\tonMount(() =\u003e {\n\t\tfunction handler(schemeMedia) {\n\t\t\ttheme = schemeMedia.matches ? webLightTheme : webDarkTheme;\n\t\t}\n\n\t\tconst schemeMedia = matchMedia('(prefers-color-scheme: light)');\n\n\t\tschemeMedia.addEventListener('change', handler);\n\n\t\ttheme = schemeMedia.matches ? webLightTheme : webDarkTheme;\n\n\t\treturn () =\u003e {\n\t\t\tschemeMedia.removeEventListener('change', handler);\n\t\t};\n\t});\n\u003c/script\u003e\n\n\u003cApp {theme}\u003e\n\t\u003cbutton\u003eFluent UI for Svelte\u003c/button\u003e\n\u003c/App\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryu-man%2Fsvelte-fui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryu-man%2Fsvelte-fui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryu-man%2Fsvelte-fui/lists"}