Svelte Fluentui

KeenMate
1

Svelte flavour of FluentUI

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
✨ FluentUI Blazor Inspired - Advanced components like DatePicker, TimePicker, InputFile, and Autocomplete
💾 Navigation Persistence - Sidebar menu state persists across page reloads with localStorage
🎯 Active Route Highlighting - Current page automatically highlighted in navigation

Highlights

Navigation Persistence - Sidebar menu state automatically saved to localStorage and restored on page reload
Active Route Highlighting - Current page is automatically highlighted in the navigation menu
DatePicker & TimePicker - Full-featured date and time selection with calendar popup and time picker
InputFile - Drag-and-drop file upload with validation and progress tracking
Autocomplete - Multiple selection with tag/chip display and async search support
QuickGrid - Advanced data grid with sorting, filtering, and pagination
Three-State Checkbox - Checkbox with indeterminate state support
Responsive Layout - Complete layout system with Grid, Stack, and responsive components

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 with three-state support
Radio / RadioGroup - Radio button controls
Switch - Toggle switch
Select - Dropdown selection
Combobox - Searchable dropdown
Autocomplete - Multiple selection with tags/chips (inspired by FluentUI Blazor)
Slider - Range slider control
Search - Search input field
DatePicker - Date selection with calendar popup (inspired by FluentUI Blazor)
TimePicker - Time selection with hour/minute/second picker (inspired by FluentUI Blazor)
InputFile - File upload with drag-drop and progress tracking (inspired by FluentUI Blazor)

Data Display

DataGrid / DataGridRow / DataGridCell - Data table components
QuickGrid - Advanced data grid with sorting, filtering, and pagination
Card - Content container
Badge - Status indicators
ProgressBar - Progress indication
Tooltip - Contextual information
Calendar - Date picker and calendar
Paginator - Pagination control

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

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>

QuickGrid with Sorting & Filtering

<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, NavGroup, NavLinkItem, BodyContent } from 'svelte-fluentui'
  import { page } from '$app/stores'

  // Check if a link is active based on current route
  function isActive(href: string): boolean {
    if (!href) return false
    if (href === "/" && $page.url.pathname === "/") return true
    if (href !== "/" && $page.url.pathname.startsWith(href)) return true
    return false
  }
</script>

<Layout>
  <Header slot="header">
    <h1>My App</h1>
  </Header>

  <NavMenu slot="navigation">
    <NavGroup title="Main Menu">
      {#snippet linkText()}
        Main Menu
      {/snippet}

      <NavLinkItem href="/" class={isActive("/") ? "active" : ""}>
        Home
      </NavLinkItem>
      <NavLinkItem href="/about" class={isActive("/about") ? "active" : ""}>
        About
      </NavLinkItem>
      <NavLinkItem href="/contact" class={isActive("/contact") ? "active" : ""}>
        Contact
      </NavLinkItem>
    </NavGroup>
  </NavMenu>

  <BodyContent>
    <!-- Main content here -->
  </BodyContent>
</Layout>

Date and Time Pickers

<script>
  import { DatePicker, TimePicker } from 'svelte-fluentui'

  let selectedDate = $state<Date | null>(new Date())
  let selectedTime = $state<string | null>("14:30")
</script>

<DatePicker
  bind:value={selectedDate}
  label="Select date"
  placeholder="Choose a date"
/>

<TimePicker
  bind:value={selectedTime}
  label="Select time"
  use24Hours={true}
  showSeconds={false}
/>

Autocomplete with Multiple Selection

<script lang="ts">
  import { Autocomplete } from 'svelte-fluentui'

  const options = [
    { value: "1", text: "Option 1" },
    { value: "2", text: "Option 2" },
    { value: "3", text: "Option 3" }
  ]

  let selected = $state<string[]>([])
</script>

<Autocomplete
  bind:selectedOptions={selected}
  options={options}
  label="Select multiple"
  placeholder="Type to search..."
  maxSelectedOptions={5}
/>

File Upload with Progress

<script lang="ts">
  import { InputFile } from 'svelte-fluentui'
  import type { FileUploadHandler } from 'svelte-fluentui'

  const uploadFile: FileUploadHandler = async (file, onProgress) => {
    const formData = new FormData()
    formData.append('file', file)

    // Your upload logic here
    // Call onProgress(percent) to update progress bar

    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData
    })

    if (!response.ok) throw new Error('Upload failed')
  }
</script>

<InputFile
  multiple={true}
  accept="image/*"
  maxFileSize={5 * 1024 * 1024}
  uploadFileCallback={uploadFile}
  onFileUploaded={(file) => console.log('Uploaded:', file.name)}
/>

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.

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing