Svelte FluentUI

A comprehensive Svelte wrapper library for Microsoft FluentUI web components (v2.6.x), providing a seamless way to use FluentUI components in Svelte applications.

Features

• 🎨 Complete FluentUI Component Set - Wraps all major FluentUI web components
• 🔧 TypeScript Support - Full type definitions for all components
• 📱 Responsive Design - Built-in responsive layout components
• 🎯 Svelte 5 Compatible - Works with the latest Svelte features
• 🎨 SCSS & Tailwind CSS - Flexible styling options
• 📦 Tree-shakeable - Import only what you need

Installation

npm install svelte-fluentui

Quick Start

<script>
  import { Button, TextField, Card } from 'svelte-fluentui'
</script>

<Card>
  <TextField placeholder="Enter your name" />
  <Button appearance="accent">Submit</Button>
</Card>

Available Components

Form Controls

• Button - Various button styles and appearances
• TextField - Text input with validation
• NumberField - Numeric input control
• Textarea - Multi-line text input
• Checkbox - Checkbox input
• Radio / RadioGroup - Radio button controls
• Switch - Toggle switch
• Select - Dropdown selection
• Combobox - Searchable dropdown
• Slider - Range slider control
• Search - Search input field

Data Display

• DataGrid / DataGridRow / DataGridCell - Data table components
• Card - Content container
• Badge - Status indicators
• ProgressBar - Progress indication
• Tooltip - Contextual information
• Calendar - Date picker and calendar

Navigation

• Tabs / Tab / TabPanel - Tab navigation
• Breadcrumb / BreadcrumbItem - Breadcrumb navigation
• Menu / MenuItem - Context menus
• AppBar / AppBarItem - Application bar
• NavMenu / NavItem / NavLink - Navigation components
• Anchor - Link component

Layout

• Stack - Flexible layout container
• Layout - Page layout wrapper
• Header / Footer / BodyContent - Layout sections
• Spacer - Spacing utility
• Divider - Visual separator

Feedback

• Dialog - Modal dialogs
• Toast - Notification messages
• Accordion / AccordionItem - Collapsible content

Utilities

• Listbox / Option - List selection
• Tree / TreeItem - Hierarchical data
• Toolbar - Action toolbars
• Paginator - Pagination control

Usage Examples

Form with Validation

<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>

Data Grid

<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>

Navigation Layout

<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>

Development

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.

Building

Build the library:

npm run build

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © KeenMate

Credits

Built on top of Microsoft FluentUI Web Components v2.6.x.