A comprehensive Svelte wrapper library for Microsoft FluentUI web components (v2.6.x), providing a seamless way to use FluentUI components in Svelte applications.
npm install svelte-fluentui
<script>
import { Button, TextField, Card } from 'svelte-fluentui'
</script>
<Card>
<TextField placeholder="Enter your name" />
<Button appearance="accent">Submit</Button>
</Card>
Button - Various button styles and appearancesTextField - Text input with validationNumberField - Numeric input controlTextarea - Multi-line text inputCheckbox - Checkbox inputRadio / RadioGroup - Radio button controlsSwitch - Toggle switchSelect - Dropdown selectionCombobox - Searchable dropdownSlider - Range slider controlSearch - Search input fieldDataGrid / DataGridRow / DataGridCell - Data table componentsQuickGrid - Advanced data grid with sorting, filtering, and paginationCard - Content containerBadge - Status indicatorsProgressBar - Progress indicationTooltip - Contextual informationCalendar - Date picker and calendarPaginator - Pagination controlTabs / Tab / TabPanel - Tab navigationBreadcrumb / BreadcrumbItem - Breadcrumb navigationMenu / MenuItem - Context menusAppBar / AppBarItem - Application barNavMenu / NavItem / NavLink - Navigation componentsAnchor - Link componentStack - Flexible layout containerLayout - Page layout wrapperHeader / Footer / BodyContent - Layout sectionsSpacer - Spacing utilityDivider - Visual separatorDialog - Modal dialogsToast - Notification messagesAccordion / AccordionItem - Collapsible contentListbox / Option - List selectionTree / TreeItem - Hierarchical dataToolbar - Action toolbars<script>
import { TextField, Button, Stack } from 'svelte-fluentui'
let email = ''
let password = ''
</script>
<Stack orientation="vertical" gap="16">
<TextField
bind:value={email}
type="email"
placeholder="Enter email"
required
/>
<TextField
bind:value={password}
type="password"
placeholder="Enter password"
required
/>
<Button appearance="accent">Sign In</Button>
</Stack>
<script>
import { DataGrid, DataGridRow, DataGridCell } from 'svelte-fluentui'
const users = [
{ name: 'Alice', email: '[email protected]', role: 'Admin' },
{ name: 'Bob', email: '[email protected]', role: 'User' }
]
</script>
<DataGrid>
{#each users as user}
<DataGridRow>
<DataGridCell>{user.name}</DataGridCell>
<DataGridCell>{user.email}</DataGridCell>
<DataGridCell>{user.role}</DataGridCell>
</DataGridRow>
{/each}
</DataGrid>
<script lang="ts">
import { QuickGrid } from 'svelte-fluentui'
type User = {
id: number
name: string
email: string
role: string
}
const users: User[] = [
{ id: 1, name: 'Alice', email: '[email protected]', role: 'Admin' },
{ id: 2, name: 'Bob', email: '[email protected]', role: 'User' },
{ id: 3, name: 'Carol', email: '[email protected]', role: 'User' }
]
const columns = [
{ field: 'id', title: 'ID', width: '80px', sortable: true },
{ field: 'name', title: 'Name', sortable: true, filterable: true },
{ field: 'email', title: 'Email', filterable: true },
{ field: 'role', title: 'Role', sortable: true }
]
</script>
<QuickGrid
items={users}
{columns}
sortable
filterable
pageable
pageSize={10}
/>
<script>
import { Layout, Header, NavMenu, NavItem, BodyContent } from 'svelte-fluentui'
</script>
<Layout>
<Header slot="header">
<h1>My App</h1>
</Header>
<NavMenu slot="navigation">
<NavItem href="/">Home</NavItem>
<NavItem href="/about">About</NavItem>
<NavItem href="/contact">Contact</NavItem>
</NavMenu>
<BodyContent>
<!-- Main content here -->
</BodyContent>
</Layout>
Clone the repository and install dependencies:
git clone https://github.com/KeenMate/svelte-fluentui.git
cd svelte-fluentui
npm install
Start the development server:
npm run dev
Visit http://localhost:5173 to see the component showcase and examples.
Build the library:
npm run build
Contributions are welcome! Please feel free to submit a Pull Request.
MIT © KeenMate
Built on top of Microsoft FluentUI Web Components v2.6.x.