DEV Community: Ethan Walker

Building Accessible Dialog Components with Melt UI in Svelte

Ethan Walker — Fri, 09 Jan 2026 11:50:55 +0000

Melt UI is a headless, accessible component library for Svelte that provides unstyled UI primitives following WAI-ARIA guidelines. It enables developers to build custom-styled components with robust interactive behavior, keyboard navigation, and accessibility features built-in. This article covers building production-ready dialog components with custom actions, focus management, and animations using Melt UI's Dialog builder. This is part 9 of a series on using Melt UI with Svelte.

This guide walks through creating accessible modal dialogs with complete keyboard navigation, focus trapping, escape key handling, and custom styling using Melt UI's createDialog builder in Svelte.

Prerequisites

Before starting, ensure you have:

A Svelte project (SvelteKit or standalone Svelte 4+)
Node.js 18+ and npm/pnpm/yarn installed
Basic understanding of Svelte reactivity, stores, and component lifecycle
Familiarity with HTML accessibility concepts (ARIA attributes, focus management)

Key concepts to understand:

Builder pattern: Melt UI uses builders that return stores and element configurations you spread onto your HTML elements
Melt action: The melt action attaches the builder's behavior (event handlers, ARIA attributes) to your elements
Focus trapping: Automatically keeps keyboard focus within the dialog when it's open
Portal rendering: Dialogs are typically rendered outside the normal DOM flow to avoid z-index issues

Installation

Install Melt UI for Svelte using your preferred package manager:

npm install @melt-ui/svelte
# or
pnpm add @melt-ui/svelte
# or
yarn add @melt-ui/svelte

The package includes all builders including the Dialog builder. No additional dependencies are required.

Project Setup

After installation, you can start using Melt UI builders immediately. No global configuration is needed. The library works with any styling solution (CSS, Tailwind, CSS-in-JS, etc.).

For TypeScript projects, types are included automatically. If you're using JavaScript, the library still provides excellent IntelliSense support.

First Example / Basic Usage

Let's start with the simplest possible working dialog:

<!-- src/lib/SimpleDialog.svelte -->
<script>
  import { createDialog, melt } from '@melt-ui/svelte';

  const {
    elements: { overlay, content, title, description, close },
    states: { open }
  } = createDialog();
</script>

<button on:click={() => $open = true}>
  Open Dialog
</button>

{#if $open}
  <div use:melt={$overlay} class="overlay">
    <div use:melt={$content} class="dialog">
      <h2 use:melt={$title}>Dialog Title</h2>
      <p use:melt={$description}>This is the dialog content.</p>
      <button use:melt={$close}>Close</button>
    </div>
  </div>
{/if}

<style>
  .overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dialog {
    background: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 90vw;
    max-height: 90vh;
  }
</style>

What's happening here:

createDialog() returns element stores and state stores
$overlay and $content are element stores that contain ARIA attributes and event handlers
The melt action spreads these attributes and handlers onto your elements
$open is a reactive store that tracks the dialog's open/closed state
The dialog automatically handles Escape key, focus trapping, and click-outside-to-close

Understanding the Basics

Melt UI's Dialog builder provides several key elements:

overlay: The backdrop that covers the screen
content: The dialog container
title: The dialog title (required for accessibility)
description: Optional descriptive text
close: A button element that closes the dialog

The builder automatically:

Manages focus (traps focus inside, returns focus on close)
Handles keyboard events (Escape to close)
Applies proper ARIA attributes (role="dialog", aria-modal, etc.)
Prevents body scrolling when open
Handles click-outside-to-close behavior

Here's a more complete example with all elements:

<!-- src/lib/CompleteDialog.svelte -->
<script>
  import { createDialog, melt } from '@melt-ui/svelte';

  const {
    elements: { overlay, content, title, description, close },
    states: { open }
  } = createDialog();
</script>

<button on:click={() => $open = true}>
  Show Complete Dialog
</button>

{#if $open}
  <div use:melt={$overlay} class="overlay">
    <div use:melt={$content} class="dialog">
      <h2 use:melt={$title} class="title">
        Confirm Action
      </h2>
      <p use:melt={$description} class="description">
        Are you sure you want to proceed? This action cannot be undone.
      </p>
      <div class="actions">
        <button use:melt={$close} class="button secondary">
          Cancel
        </button>
        <button 
          class="button primary"
          on:click={() => {
            console.log('Action confirmed');
            $open = false;
          }}
        >
          Confirm
        </button>
      </div>
    </div>
  </div>
{/if}

<style>
  .overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }

  .dialog {
    background: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 100%;
  }

  .title {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
  }

  .description {
    margin: 0 0 1.5rem 0;
    color: #666;
  }

  .actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
  }

  .button {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
  }

  .button.primary {
    background: #3b82f6;
    color: white;
  }

  .button.primary:hover {
    background: #2563eb;
  }

  .button.secondary {
    background: #e5e7eb;
    color: #374151;
  }

  .button.secondary:hover {
    background: #d1d5db;
  }
</style>

Practical Example / Building Something Real

Let's build a production-ready user creation dialog with form validation, loading states, and animations:

<!-- src/lib/UserCreationDialog.svelte -->
<script>
  import { createDialog, melt } from '@melt-ui/svelte';
  import { fade, fly } from 'svelte/transition';

  const {
    elements: { overlay, content, title, description, close },
    states: { open }
  } = createDialog({
    closeOnOutsideClick: false, // Prevent accidental closes during form filling
    closeOnEscape: true
  });

  let formData = {
    name: '',
    email: '',
    role: 'user'
  };

  let errors = {};
  let isSubmitting = false;

  function validateForm() {
    errors = {};

    if (!formData.name.trim()) {
      errors.name = 'Name is required';
    }

    if (!formData.email.trim()) {
      errors.email = 'Email is required';
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      errors.email = 'Please enter a valid email address';
    }

    return Object.keys(errors).length === 0;
  }

  async function handleSubmit() {
    if (!validateForm()) {
      return;
    }

    isSubmitting = true;

    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1500));
      console.log('User created:', formData);

      // Reset form and close dialog
      formData = { name: '', email: '', role: 'user' };
      errors = {};
      $open = false;
    } catch (error) {
      console.error('Error creating user:', error);
    } finally {
      isSubmitting = false;
    }
  }

  function handleClose() {
    if (!isSubmitting) {
      formData = { name: '', email: '', role: 'user' };
      errors = {};
      $open = false;
    }
  }
</script>

<button 
  on:click={() => $open = true}
  class="trigger-button"
>
  Add New User
</button>

{#if $open}
  <div 
    use:melt={$overlay}
    transition:fade={{ duration: 200 }}
    class="overlay"
    on:click={handleClose}
  >
    <div 
      use:melt={$content}
      transition:fly={{ y: -20, duration: 200 }}
      class="dialog"
      on:click|stopPropagation
    >
      <h2 use:melt={$title} class="title">
        Create New User
      </h2>
      <p use:melt={$description} class="description">
        Fill in the details to create a new user account.
      </p>

      <form on:submit|preventDefault={handleSubmit} class="form">
        <div class="form-group">
          <label for="name" class="label">
            Full Name <span class="required">*</span>
          </label>
          <input
            id="name"
            type="text"
            bind:value={formData.name}
            class="input"
            class:error={errors.name}
            placeholder="John Doe"
            disabled={isSubmitting}
          />
          {#if errors.name}
            <span class="error-message">{errors.name}</span>
          {/if}
        </div>

        <div class="form-group">
          <label for="email" class="label">
            Email Address <span class="required">*</span>
          </label>
          <input
            id="email"
            type="email"
            bind:value={formData.email}
            class="input"
            class:error={errors.email}
            placeholder="john@example.com"
            disabled={isSubmitting}
          />
          {#if errors.email}
            <span class="error-message">{errors.email}</span>
          {/if}
        </div>

        <div class="form-group">
          <label for="role" class="label">Role</label>
          <select
            id="role"
            bind:value={formData.role}
            class="input"
            disabled={isSubmitting}
          >
            <option value="user">User</option>
            <option value="admin">Administrator</option>
            <option value="moderator">Moderator</option>
          </select>
        </div>

        <div class="form-actions">
          <button
            type="button"
            use:melt={$close}
            on:click={handleClose}
            class="button secondary"
            disabled={isSubmitting}
          >
            Cancel
          </button>
          <button
            type="submit"
            class="button primary"
            disabled={isSubmitting}
          >
            {#if isSubmitting}
              Creating...
            {:else}
              Create User
            {/if}
          </button>
        </div>
      </form>
    </div>
  </div>
{/if}

<style>
  .trigger-button {
    padding: 0.5rem 1rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-weight: 500;
  }

  .trigger-button:hover {
    background: #2563eb;
  }

  .overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }

  .dialog {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
  }

  .title {
    margin: 0;
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
  }

  .description {
    margin: 0 0 1.5rem 0;
    padding: 0 1.5rem;
    color: #6b7280;
    font-size: 0.875rem;
  }

  .form {
    padding: 0 1.5rem 1.5rem 1.5rem;
  }

  .form-group {
    margin-bottom: 1.25rem;
  }

  .label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
  }

  .required {
    color: #ef4444;
  }

  .input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }

  .input.error {
    border-color: #ef4444;
  }

  .input:disabled {
    background: #f3f4f6;
    cursor: not-allowed;
  }

  .error-message {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #ef4444;
  }

  .form-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
  }

  .button {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    transition: background-color 0.2s;
  }

  .button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .button.primary {
    background: #3b82f6;
    color: white;
  }

  .button.primary:hover:not(:disabled) {
    background: #2563eb;
  }

  .button.secondary {
    background: #f3f4f6;
    color: #374151;
  }

  .button.secondary:hover:not(:disabled) {
    background: #e5e7eb;
  }
</style>

Key features of this implementation:

Form validation with error messages
Loading state during submission
Prevents closing during submission
Smooth animations using Svelte transitions
Proper focus management (automatically handled by Melt UI)
Accessible form labels and error announcements
Responsive design with max-width constraints

Advanced Configuration Options

Melt UI's createDialog accepts several configuration options:

<script>
  import { createDialog, melt } from '@melt-ui/svelte';
  import { writable } from 'svelte/store';

  // External state control
  const externalOpen = writable(false);

  const {
    elements: { overlay, content, title, close },
    states: { open }
  } = createDialog({
    open: externalOpen,              // Control dialog from external store
    closeOnOutsideClick: true,      // Close when clicking overlay
    closeOnEscape: true,            // Close on Escape key
    preventScroll: true,            // Prevent body scrolling when open
    closeFocus: null,               // Element to focus when closing (null = trigger)
    openFocus: undefined,           // Element to focus when opening (undefined = first focusable)
    onOpenChange: (open) => {       // Callback when open state changes
      console.log('Dialog is now:', open ? 'open' : 'closed');
    }
  });
</script>

Common Issues / Troubleshooting

Dialog doesn't close on Escape key

Ensure the melt action is applied to both overlay and content elements
Check that closeOnEscape: true is set (it's true by default)
Verify the dialog is conditionally rendered with {#if $open}

Focus not trapped inside dialog

Make sure melt action is applied to the content element
The builder automatically handles focus trapping - don't manually manage focus
Ensure no other focus management code interferes (remove manual focus() calls)

Overlay not covering the entire screen

Add CSS: position: fixed; inset: 0; z-index: 50; to the overlay element
Check for parent elements with overflow: hidden or position: relative that might clip the overlay

Dialog content not centered

Use flexbox on overlay: display: flex; align-items: center; justify-content: center;
Or use CSS Grid: display: grid; place-items: center;

Body scroll not prevented

Ensure preventScroll: true is set (it's true by default)
Check that the overlay is rendered at the root level, not inside a scrollable container

Next Steps

Now that you understand how to build accessible dialogs with Melt UI, consider exploring:

Nested dialogs: Creating dialogs that open other dialogs
Alert dialogs: Using the AlertDialog builder for confirmation dialogs
Custom animations: Implementing more complex transitions and animations
Form integration: Building reusable dialog components with form libraries
State management: Integrating dialogs with global state management solutions
Testing: Writing tests for dialog components with Svelte Testing Library

For more advanced patterns, check out other articles in this series covering:

Building data tables with Melt UI
Creating accessible form components
Implementing navigation menus and dropdowns

Additional Resources:

Summary

This guide walked through building accessible dialog components with Melt UI in Svelte. You learned how to use the createDialog builder to create modal dialogs with automatic focus management, keyboard navigation, and ARIA compliance. You should now be able to create production-ready dialogs with custom styling, form integration, and advanced configurations.

Advanced Theme Customization and Dynamic Color Schemes with m3-svelte in Svelte

Ethan Walker — Fri, 09 Jan 2026 11:50:01 +0000

m3-svelte is a powerful Material Design 3 component library for Svelte, providing a complete set of UI components with modern theming support. This article covers advanced theme customization, creating dynamic color schemes, and implementing light/dark theme switching with programmatic control. This is part 15 of a series on using m3-svelte with Svelte.

This guide walks through creating a dynamic theming system with m3-svelte in Svelte, from basic setup to implementing complex scenarios with theme switching, custom color palettes, and user preference adaptation.

Prerequisites

Before starting, ensure you have:

A SvelteKit project (SvelteKit 1.0+ or standalone Svelte 4+)
Node.js 18+ and npm/pnpm/yarn
Basic understanding of CSS custom properties (CSS variables)
Knowledge of color spaces (RGB, HSL)
Understanding of Svelte reactivity and stores

Action example: CSS custom properties in m3-svelte work through the token system --m3-scheme-[color]. When you set --m3-scheme-primary: 103 80 164, the library automatically applies this color to all components using the primary color. This allows you to change the entire application's color scheme by modifying just a few variables in :root.

Installation

Install m3-svelte and necessary dependencies:

npm install m3-svelte

For working with themes, you may also need a color utility:

npm install color

Verify installation:

npm list m3-svelte

Project Setup

Create the project structure for working with themes:

mkdir -p src/lib/themes
mkdir -p src/lib/stores

Copy the base m3-svelte theme. Go to the official m3-svelte website and copy the CSS theme code into src/app.css:

/* src/app.css */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* Paste the CSS theme code from m3-svelte website here */

:root {
  /* Custom styles will go here */
}

body {
  display: flex;
  height: 100dvh;
  margin: 0;
  box-sizing: border-box;
  background: rgb(var(--m3-scheme-background));
  color: rgb(var(--m3-scheme-on-background));
  font-family: 'Roboto', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

Link the styles in src/app.html (for SvelteKit) or in the main component:

<!-- src/app.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="/app.css" />
  </head>
  <body>
    <div id="app">%sveltekit.body%</div>
  </body>
</html>

First Example / Basic Usage

Create a simple component to demonstrate basic theming:

<!-- src/routes/+page.svelte -->
<script>
  import Button from 'm3-svelte/Button.svelte';
  import Card from 'm3-svelte/Card.svelte';
</script>

<Card>
  <h2>Basic m3-svelte Theming</h2>
  <p>This example demonstrates using the standard Material Design 3 theme.</p>
  <Button>Primary Button</Button>
</Card>

<style>
  :global(body) {
    padding: 2rem;
  }

  h2 {
    margin: 0 0 1rem 0;
    color: rgb(var(--m3-scheme-on-surface));
  }

  p {
    margin: 0 0 1.5rem 0;
    color: rgb(var(--m3-scheme-on-surface-variant));
  }
</style>

This example shows basic usage of m3-svelte components with the standard theme. All colors are automatically applied through CSS custom properties.

Understanding the Basics

m3-svelte uses a CSS custom properties system for theme management. Main variable groups:

Color tokens (--m3-scheme-[color]): Define interface colors
Elevation (--m3-util-elevation-[0-5]): Control shadows and depth
Rounding (--m3-util-rounding-[size]): Control border radius

Example of changing the primary color:

:root {
  --m3-scheme-primary: 103 80 164; /* RGB values without rgb() */
  --m3-scheme-on-primary: 255 255 255;
  --m3-scheme-primary-container: 234 221 255;
  --m3-scheme-on-primary-container: 33 0 94;
}

All components automatically use these values. Changing variables instantly updates the entire interface.

Practical Example / Building Something Real

Let's create a complete dynamic theming system with switching between light and dark themes, plus custom color palettes.

First, create a store for theme management:

// src/lib/stores/theme.ts
import { writable } from 'svelte/store';
import { browser } from '$app/environment';

export type ThemeMode = 'light' | 'dark' | 'auto';
export type ColorScheme = 'default' | 'ocean' | 'forest' | 'sunset';

interface ThemeConfig {
  mode: ThemeMode;
  scheme: ColorScheme;
}

const defaultTheme: ThemeConfig = {
  mode: 'auto',
  scheme: 'default'
};

function createThemeStore() {
  const { subscribe, set, update } = writable<ThemeConfig>(defaultTheme);

  // Load saved theme from localStorage
  if (browser) {
    const saved = localStorage.getItem('m3-theme');
    if (saved) {
      try {
        set(JSON.parse(saved));
      } catch {
        set(defaultTheme);
      }
    }
  }

  return {
    subscribe,
    setMode: (mode: ThemeMode) => {
      update((config) => {
        const newConfig = { ...config, mode };
        if (browser) {
          localStorage.setItem('m3-theme', JSON.stringify(newConfig));
          applyTheme(newConfig);
        }
        return newConfig;
      });
    },
    setScheme: (scheme: ColorScheme) => {
      update((config) => {
        const newConfig = { ...config, scheme };
        if (browser) {
          localStorage.setItem('m3-theme', JSON.stringify(newConfig));
          applyTheme(newConfig);
        }
        return newConfig;
      });
    },
    set: (config: ThemeConfig) => {
      if (browser) {
        localStorage.setItem('m3-theme', JSON.stringify(config));
        applyTheme(config);
      }
      set(config);
    }
  };
}

function applyTheme(config: ThemeConfig) {
  if (!browser) return;

  const root = document.documentElement;
  const isDark = config.mode === 'dark' || 
    (config.mode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);

  // Determine color scheme
  const colorPalette = getColorPalette(config.scheme, isDark);

  // Apply colors to CSS variables
  Object.entries(colorPalette).forEach(([key, value]) => {
    root.style.setProperty(`--m3-scheme-${key}`, value);
  });

  // Set data attribute for additional styles
  root.setAttribute('data-theme', isDark ? 'dark' : 'light');
}

function getColorPalette(scheme: ColorScheme, isDark: boolean): Record<string, string> {
  const palettes = {
    default: {
      light: {
        primary: '103 80 164',
        'on-primary': '255 255 255',
        'primary-container': '234 221 255',
        'on-primary-container': '33 0 94',
        secondary: '98 91 113',
        'on-secondary': '255 255 255',
        'secondary-container': '232 222 248',
        'on-secondary-container': '30 25 43',
        tertiary: '125 82 96',
        'on-tertiary': '255 255 255',
        'tertiary-container': '255 216 228',
        'on-tertiary-container': '55 11 30',
        error: '186 26 26',
        'on-error': '255 255 255',
        'error-container': '255 218 214',
        'on-error-container': '65 0 2',
        background: '255 251 254',
        'on-background': '28 27 31',
        surface: '255 251 254',
        'on-surface': '28 27 31',
        'surface-variant': '231 224 236',
        'on-surface-variant': '73 69 79',
        outline: '121 116 126',
        'outline-variant': '202 196 208'
      },
      dark: {
        primary: '208 188 255',
        'on-primary': '55 30 115',
        'primary-container': '79 55 139',
        'on-primary-container': '234 221 255',
        secondary: '204 194 220',
        'on-secondary': '51 45 65',
        'secondary-container': '74 68 88',
        'on-secondary-container': '232 222 248',
        tertiary: '239 184 200',
        'on-tertiary': '75 37 52',
        'tertiary-container': '99 59 72',
        'on-tertiary-container': '255 216 228',
        error: '255 180 171',
        'on-error': '105 0 5',
        'error-container': '147 0 10',
        'on-error-container': '255 218 214',
        background: '28 27 31',
        'on-background': '230 225 229',
        surface: '28 27 31',
        'on-surface': '230 225 229',
        'surface-variant': '73 69 79',
        'on-surface-variant': '202 196 208',
        outline: '147 143 153',
        'outline-variant': '73 69 79'
      }
    },
    ocean: {
      light: {
        primary: '0 103 192',
        'on-primary': '255 255 255',
        'primary-container': '207 227 255',
        'on-primary-container': '0 31 65',
        secondary: '83 94 111',
        'on-secondary': '255 255 255',
        'secondary-container': '215 227 247',
        'on-secondary-container': '16 28 43',
        tertiary: '0 121 107',
        'on-tertiary': '255 255 255',
        'tertiary-container': '118 255 243',
        'on-tertiary-container': '0 54 48',
        error: '186 26 26',
        'on-error': '255 255 255',
        'error-container': '255 218 214',
        'on-error-container': '65 0 2',
        background: '249 250 253',
        'on-background': '25 28 32',
        surface: '249 250 253',
        'on-surface': '25 28 32',
        'surface-variant': '224 227 235',
        'on-surface-variant': '68 71 79',
        outline: '118 121 129',
        'outline-variant': '196 199 207'
      },
      dark: {
        primary: '159 202 255',
        'on-primary': '0 51 83',
        'primary-container': '0 79 135',
        'on-primary-container': '207 227 255',
        secondary: '187 199 219',
        'on-secondary': '38 49 65',
        'secondary-container': '61 72 88',
        'on-secondary-container': '215 227 247',
        tertiary: '85 216 198',
        'on-tertiary': '0 73 66',
        'tertiary-container': '0 95 85',
        'on-tertiary-container': '118 255 243',
        error: '255 180 171',
        'on-error': '105 0 5',
        'error-container': '147 0 10',
        'on-error-container': '255 218 214',
        background: '18 20 24',
        'on-background': '225 227 231',
        surface: '18 20 24',
        'on-surface': '225 227 231',
        'surface-variant': '68 71 79',
        'on-surface-variant': '196 199 207',
        outline: '144 148 156',
        'outline-variant': '68 71 79'
      }
    },
    forest: {
      light: {
        primary: '16 109 32',
        'on-primary': '255 255 255',
        'primary-container': '142 248 139',
        'on-primary-container': '0 37 0',
        secondary: '82 99 79',
        'on-secondary': '255 255 255',
        'secondary-container': '213 240 205',
        'on-secondary-container': '16 31 15',
        tertiary: '56 101 29',
        'on-tertiary': '255 255 255',
        'tertiary-container': '183 236 130',
        'on-tertiary-container': '13 33 0',
        error: '186 26 26',
        'on-error': '255 255 255',
        'error-container': '255 218 214',
        'on-error-container': '65 0 2',
        background: '252 253 247',
        'on-background': '25 28 23',
        surface: '252 253 247',
        'on-surface': '25 28 23',
        'surface-variant': '222 228 218',
        'on-surface-variant': '61 68 57',
        outline: '113 119 108',
        'outline-variant': '194 200 189'
      },
      dark: {
        primary: '116 219 110',
        'on-primary': '0 57 0',
        'primary-container': '0 82 0',
        'on-primary-container': '142 248 139',
        secondary: '185 213 177',
        'on-secondary': '37 54 35',
        'secondary-container': '59 76 57',
        'on-secondary-container': '213 240 205',
        tertiary: '156 209 105',
        'on-tertiary': '26 52 0',
        'tertiary-container': '40 75 0',
        'on-tertiary-container': '183 236 130',
        error: '255 180 171',
        'on-error': '105 0 5',
        'error-container': '147 0 10',
        'on-error-container': '255 218 214',
        background: '18 20 15',
        'on-background': '225 227 220',
        surface: '18 20 15',
        'on-surface': '225 227 220',
        'surface-variant': '61 68 57',
        'on-surface-variant': '194 200 189',
        outline: '141 147 136',
        'outline-variant': '61 68 57'
      }
    },
    sunset: {
      light: {
        primary: '191 69 0',
        'on-primary': '255 255 255',
        'primary-container': '255 219 190',
        'on-primary-container': '62 18 0',
        secondary: '137 82 78',
        'on-secondary': '255 255 255',
        'secondary-container': '255 218 214',
        'on-secondary-container': '59 18 16',
        tertiary: '178 94 0',
        'on-tertiary': '255 255 255',
        'tertiary-container': '255 220 183',
        'on-tertiary-container': '58 25 0',
        error: '186 26 26',
        'on-error': '255 255 255',
        'error-container': '255 218 214',
        'on-error-container': '65 0 2',
        background: '255 251 248',
        'on-background': '32 26 23',
        surface: '255 251 248',
        'on-surface': '32 26 23',
        'surface-variant': '245 223 210',
        'on-surface-variant': '80 68 60',
        outline: '152 132 119',
        'outline-variant': '230 207 193'
      },
      dark: {
        primary: '255 183 134',
        'on-primary': '102 32 0',
        'primary-container': '145 48 0',
        'on-primary-container': '255 219 190',
        secondary: '230 184 180',
        'on-secondary': '92 50 47',
        'secondary-container': '115 64 60',
        'on-secondary-container': '255 218 214',
        tertiary: '255 186 112',
        'on-tertiary': '94 48 0',
        'tertiary-container': '135 71 0',
        'on-tertiary-container': '255 220 183',
        error: '255 180 171',
        'on-error': '105 0 5',
        'error-container': '147 0 10',
        'on-error-container': '255 218 214',
        background: '23 18 15',
        'on-background': '237 225 218',
        surface: '23 18 15',
        'on-surface': '237 225 218',
        'surface-variant': '80 68 60',
        'on-surface-variant': '230 207 193',
        outline: '178 158 145',
        'outline-variant': '80 68 60'
      }
    }
  };

  return palettes[scheme][isDark ? 'dark' : 'light'];
}

export const themeStore = createThemeStore();

// Initialize theme on load
if (browser) {
  themeStore.subscribe((config) => {
    applyTheme(config);
  });

  // Listen for system theme changes
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
    themeStore.subscribe((config) => {
      if (config.mode === 'auto') {
        applyTheme(config);
      }
    });
  });
}

Now create a component for theme control:

<!-- src/lib/components/ThemeController.svelte -->
<script lang="ts">
  import { themeStore, type ThemeMode, type ColorScheme } from '$lib/stores/theme';
  import Card from 'm3-svelte/Card.svelte';
  import { Arrows } from 'm3-svelte';

  let mode: ThemeMode = 'auto';
  let scheme: ColorScheme = 'default';

  $: {
    themeStore.subscribe((config) => {
      mode = config.mode;
      scheme = config.scheme;
    });
  }

  function handleModeChange(newMode: ThemeMode) {
    themeStore.setMode(newMode);
  }

  function handleSchemeChange(newScheme: ColorScheme) {
    themeStore.setScheme(newScheme);
  }
</script>

<Card>
  <h3>Theme Control</h3>

  <div class="control-group">
    <label>
      <span>Theme Mode:</span>
      <Arrows
        list={['light', 'dark', 'auto']}
        bind:value={mode}
        onchange={() => handleModeChange(mode)}
      />
      <span class="value">{mode === 'light' ? 'Light' : mode === 'dark' ? 'Dark' : 'Auto'}</span>
    </label>
  </div>

  <div class="control-group">
    <label>
      <span>Color Scheme:</span>
      <Arrows
        list={['default', 'ocean', 'forest', 'sunset']}
        bind:value={scheme}
        onchange={() => handleSchemeChange(scheme)}
      />
      <span class="value">
        {scheme === 'default' ? 'Default' :
         scheme === 'ocean' ? 'Ocean' :
         scheme === 'forest' ? 'Forest' :
         'Sunset'}
      </span>
    </label>
  </div>
</Card>

<style>
  .control-group {
    margin-bottom: 1.5rem;
  }

  .control-group:last-child {
    margin-bottom: 0;
  }

  label {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
  }

  label span:first-child {
    min-width: 120px;
    color: rgb(var(--m3-scheme-on-surface));
  }

  .value {
    color: rgb(var(--m3-scheme-primary));
    font-weight: 500;
  }

  h3 {
    margin: 0 0 1.5rem 0;
    color: rgb(var(--m3-scheme-on-surface));
  }
</style>

Create a demonstration page:

<!-- src/routes/+page.svelte -->
<script>
  import Button from 'm3-svelte/Button.svelte';
  import Card from 'm3-svelte/Card.svelte';
  import FAB from 'm3-svelte/FAB.svelte';
  import { ThemeController } from '$lib/components/ThemeController.svelte';
  import { themeStore } from '$lib/stores/theme';
</script>

<div class="container">
  <ThemeController />

  <Card>
    <h1>Dynamic Theming Demonstration</h1>
    <p>
      Change the theme mode or color scheme above to see how all components 
      automatically update.
    </p>

    <div class="button-group">
      <Button>Primary Button</Button>
      <Button variant="outlined">Outlined Button</Button>
      <Button variant="text">Text Button</Button>
    </div>

    <div class="fab-container">
      <FAB icon="add" />
    </div>
  </Card>

  <Card>
    <h2>Current Theme Settings</h2>
    <pre>{JSON.stringify($themeStore, null, 2)}</pre>
  </Card>
</div>

<style>
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  h1 {
    margin: 0 0 1rem 0;
    color: rgb(var(--m3-scheme-on-surface));
  }

  h2 {
    margin: 0 0 1rem 0;
    color: rgb(var(--m3-scheme-on-surface));
  }

  p {
    margin: 0 0 2rem 0;
    color: rgb(var(--m3-scheme-on-surface-variant));
    line-height: 1.6;
  }

  .button-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
  }

  .fab-container {
    display: flex;
    justify-content: center;
    padding: 2rem;
  }

  pre {
    background: rgb(var(--m3-scheme-surface-variant));
    color: rgb(var(--m3-scheme-on-surface-variant));
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0;
  }
</style>

Add theme initialization to the layout:

<!-- src/routes/+layout.svelte -->
<script>
  import { onMount } from 'svelte';
  import { themeStore } from '$lib/stores/theme';
  import '../app.css';

  onMount(() => {
    // Apply saved theme on load
    themeStore.subscribe(() => {});
  });
</script>

<slot />

Common Issues / Troubleshooting

Theme not applying on first load
- Ensure CSS variables are set before component rendering
- Use onMount for theme initialization in layout
Colors displaying incorrectly
- Check RGB value format: they should be without rgb() (e.g., 103 80 164, not rgb(103, 80, 164))
- Ensure all necessary CSS variables are defined
Theme switching is slow
- Add CSS transitions for smooth animation: transition: background-color 0.3s ease, color 0.3s ease;
- Use requestAnimationFrame for update synchronization
Theme not persisting between sessions
- Check that localStorage is available (browser only)
- Use browser check from $app/environment before accessing localStorage

Next Steps

Now that you've mastered advanced theming, you can:

Learn to create custom color palettes based on user colors
Integrate theming with operating system settings
Create a visual theme editor for users
Study performance optimization when switching themes
Read other articles in the series about working with specific m3-svelte components

Useful resources:

Summary

You've learned to create a dynamic theming system with m3-svelte, including switching between light and dark themes, multiple color schemes, and saving user preferences. You can now apply this knowledge to create adaptive and personalized interfaces that automatically adjust to user preferences.

Building Advanced Component Scaffolding with lomer-ui CLI in Svelte

Ethan Walker — Fri, 09 Jan 2026 11:48:55 +0000

lomer-ui is a dead-simple CLI tool that instantly kickstarts your Svelte components, allowing developers to rapidly scaffold production-ready component structures with best practices built-in. This article covers advanced component scaffolding, custom template creation, and integration with SvelteKit workflows for enterprise-level development. This is part 1 of a series on using lomer-ui with Svelte.

This guide walks through creating a sophisticated component scaffolding system using lomer-ui CLI with Svelte, from initial setup to building custom templates and automating component generation workflows.

Prerequisites

Before starting, ensure you have:

A SvelteKit project (SvelteKit 1.0+ or standalone Svelte 4+)
Node.js 18+ and npm/pnpm/yarn
Basic understanding of Svelte component architecture, props, slots, and lifecycle
Familiarity with CLI tools and command-line interfaces
Understanding of project structure and component organization patterns

Action example: The lomer generate command creates a new component with a predefined structure. When you run lomer generate Button, it scaffolds a complete component file with TypeScript types, proper prop definitions, and a basic template structure. The CLI analyzes your project structure and automatically places components in the correct directory based on your configuration.

Installation

Install lomer-ui globally or as a dev dependency:

# Global installation (recommended for CLI tools)
npm install -g lomer-ui

# Or as a dev dependency
npm install -D lomer-ui

Verify installation:

lomer --version

Project Setup

Initialize lomer-ui in your SvelteKit project:

lomer init

This creates a lomer.config.js configuration file in your project root:

// lomer.config.js
export default {
  // Component output directory
  componentsDir: 'src/lib/components',

  // Template directory for custom templates
  templatesDir: 'lomer-templates',

  // Default component structure
  defaultStructure: {
    includeTypes: true,
    includeTests: false,
    includeStories: false,
    includeStyles: true
  },

  // File naming conventions
  naming: {
    component: 'PascalCase',
    file: 'kebab-case'
  },

  // SvelteKit specific settings
  sveltekit: {
    useLib: true,
    generateIndex: true
  }
}

Create the components directory structure:

mkdir -p src/lib/components
mkdir -p lomer-templates

First Example / Basic Usage

Let's create your first component using lomer-ui:

lomer generate Button

This generates a complete component structure:

<!-- src/lib/components/button/Button.svelte -->
<script lang="ts">
  interface ButtonProps {
    variant?: 'primary' | 'secondary' | 'outline';
    size?: 'sm' | 'md' | 'lg';
    disabled?: boolean;
    type?: 'button' | 'submit' | 'reset';
  }

  let {
    variant = 'primary',
    size = 'md',
    disabled = false,
    type = 'button',
    ...restProps
  }: ButtonProps = $props();

  // Component logic here
  function handleClick(event: MouseEvent) {
    if (disabled) return;
    // Handle click logic
  }
</script>

<button
  class="btn btn-{variant} btn-{size}"
  {disabled}
  {type}
  onclick={handleClick}
  {...restProps}
>
  <slot />
</button>

<style>
  .btn {
    @apply px-4 py-2 rounded font-medium transition-colors;
  }

  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700;
  }

  .btn-secondary {
    @apply bg-gray-600 text-white hover:bg-gray-700;
  }

  .btn-outline {
    @apply border-2 border-blue-600 text-blue-600 hover:bg-blue-50;
  }

  .btn-sm {
    @apply px-2 py-1 text-sm;
  }

  .btn-md {
    @apply px-4 py-2;
  }

  .btn-lg {
    @apply px-6 py-3 text-lg;
  }

  .btn:disabled {
    @apply opacity-50 cursor-not-allowed;
  }
</style>

The CLI also generates a TypeScript types file:

// src/lib/components/button/Button.types.ts
export interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  type?: 'button' | 'submit' | 'reset';
}

export type ButtonVariant = ButtonProps['variant'];
export type ButtonSize = ButtonProps['size'];

And an index file for easy imports:

// src/lib/components/button/index.ts
export { default as Button } from './Button.svelte';
export type { ButtonProps, ButtonVariant, ButtonSize } from './Button.types';

Understanding the Basics

lomer-ui integrates seamlessly with Svelte's component architecture. The CLI understands Svelte's runes system (introduced in Svelte 5) and generates components using modern patterns:

Props with $props(): Uses Svelte 5's new props syntax for better type safety
Reactive statements: Automatically includes $state() and $derived() when needed
Slot support: Generates proper slot structures for composable components
TypeScript integration: Full type safety with proper interfaces and exports

The generated components follow SvelteKit conventions, placing reusable components in src/lib/components for easy import across your application.

Practical Example / Building Something Real

Let's build a complete, production-ready DataTable component with advanced features. This demonstrates how lomer-ui can scaffold complex components with proper state management, accessibility, and error handling.

Step 1: Generate the Base Component

lomer generate DataTable --with-types --with-styles

Step 2: Implement the Complete Component

<!-- src/lib/components/data-table/DataTable.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  import type { DataTableProps, TableColumn, TableData } from './DataTable.types';

  interface DataTableProps {
    columns: TableColumn[];
    data: TableData[];
    loading?: boolean;
    sortable?: boolean;
    filterable?: boolean;
    pageSize?: number;
    onRowClick?: (row: TableData) => void;
  }

  let {
    columns,
    data = [],
    loading = false,
    sortable = true,
    filterable = true,
    pageSize = 10,
    onRowClick
  }: DataTableProps = $props();

  // State management
  let currentPage = $state(1);
  let sortColumn = $state<string | null>(null);
  let sortDirection = $state<'asc' | 'desc'>('asc');
  let filterValue = $state('');
  let filteredData = $derived.by(() => {
    let result = [...data];

    // Apply filtering
    if (filterValue && filterable) {
      const searchLower = filterValue.toLowerCase();
      result = result.filter(row => 
        columns.some(col => {
          const value = row[col.key];
          return value?.toString().toLowerCase().includes(searchLower);
        })
      );
    }

    // Apply sorting
    if (sortColumn && sortable) {
      result.sort((a, b) => {
        const aVal = a[sortColumn];
        const bVal = b[sortColumn];
        const modifier = sortDirection === 'asc' ? 1 : -1;

        if (aVal < bVal) return -1 * modifier;
        if (aVal > bVal) return 1 * modifier;
        return 0;
      });
    }

    return result;
  });

  let paginatedData = $derived.by(() => {
    const start = (currentPage - 1) * pageSize;
    const end = start + pageSize;
    return filteredData.slice(start, end);
  });

  let totalPages = $derived.by(() => 
    Math.ceil(filteredData.length / pageSize)
  );

  // Event handlers with error handling
  function handleSort(columnKey: string) {
    if (!sortable) return;

    try {
      if (sortColumn === columnKey) {
        sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
      } else {
        sortColumn = columnKey;
        sortDirection = 'asc';
      }
      currentPage = 1; // Reset to first page on sort
    } catch (error) {
      console.error('Error sorting table:', error);
    }
  }

  function handleRowClick(row: TableData) {
    if (onRowClick) {
      try {
        onRowClick(row);
      } catch (error) {
        console.error('Error handling row click:', error);
      }
    }
  }

  function handlePageChange(newPage: number) {
    if (newPage >= 1 && newPage <= totalPages) {
      currentPage = newPage;
      // Scroll to top of table for better UX
      const tableElement = document.querySelector('[data-table-container]');
      tableElement?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }

  // Accessibility: Keyboard navigation
  function handleKeydown(event: KeyboardEvent, row: TableData) {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      handleRowClick(row);
    }
  }
</script>

<div class="data-table-container" data-table-container>
  <!-- Filter input -->
  {#if filterable}
    <div class="filter-section" role="search">
      <label for="table-filter" class="sr-only">Filter table</label>
      <input
        id="table-filter"
        type="text"
        placeholder="Search..."
        bind:value={filterValue}
        class="filter-input"
        aria-label="Filter table data"
      />
    </div>
  {/if}

  <!-- Loading state -->
  {#if loading}
    <div class="loading-state" role="status" aria-live="polite">
      <span class="spinner" aria-hidden="true"></span>
      <span>Loading data...</span>
    </div>
  {:else}
    <!-- Table -->
    <div class="table-wrapper">
      <table class="data-table" role="table" aria-label="Data table">
        <thead>
          <tr>
            {#each columns as column}
              <th
                class="table-header"
                class:sortable={sortable}
                class:sorted={sortColumn === column.key}
                class:sort-asc={sortColumn === column.key && sortDirection === 'asc'}
                class:sort-desc={sortColumn === column.key && sortDirection === 'desc'}
                onclick={() => handleSort(column.key)}
                role="columnheader"
                aria-sort={sortColumn === column.key 
                  ? (sortDirection === 'asc' ? 'ascending' : 'descending')
                  : 'none'}
              >
                {column.label}
                {#if sortable && sortColumn === column.key}
                  <span class="sort-indicator" aria-hidden="true">
                    {sortDirection === 'asc' ? '↑' : '↓'}
                  </span>
                {/if}
              </th>
            {/each}
          </tr>
        </thead>
        <tbody>
          {#if paginatedData.length === 0}
            <tr>
              <td colspan={columns.length} class="empty-state">
                No data available
              </td>
            </tr>
          {:else}
            {#each paginatedData as row (row.id || row)}
              <tr
                class="table-row"
                class:clickable={!!onRowClick}
                onclick={() => handleRowClick(row)}
                onkeydown={(e) => handleKeydown(e, row)}
                tabindex={onRowClick ? 0 : -1}
                role="row"
              >
                {#each columns as column}
                  <td class="table-cell" role="cell">
                    {#if column.render}
                      {@html column.render(row[column.key], row)}
                    {:else}
                      {row[column.key] ?? '—'}
                    {/if}
                  </td>
                {/each}
              </tr>
            {/each}
          {/if}
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    {#if totalPages > 1}
      <nav class="pagination" role="navigation" aria-label="Table pagination">
        <button
          class="pagination-btn"
          disabled={currentPage === 1}
          onclick={() => handlePageChange(currentPage - 1)}
          aria-label="Previous page"
        >
          Previous
        </button>

        <span class="pagination-info" aria-live="polite">
          Page {currentPage} of {totalPages}
        </span>

        <button
          class="pagination-btn"
          disabled={currentPage === totalPages}
          onclick={() => handlePageChange(currentPage + 1)}
          aria-label="Next page"
        >
          Next
        </button>
      </nav>
    {/if}
  {/if}
</div>

<style>
  .data-table-container {
    @apply w-full;
  }

  .filter-section {
    @apply mb-4;
  }

  .filter-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500;
  }

  .loading-state {
    @apply flex items-center justify-center py-12 text-gray-500;
  }

  .spinner {
    @apply inline-block w-4 h-4 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin mr-2;
  }

  .table-wrapper {
    @apply overflow-x-auto;
  }

  .data-table {
    @apply w-full border-collapse;
  }

  .table-header {
    @apply px-4 py-3 text-left bg-gray-50 font-semibold text-gray-700 border-b border-gray-200;
  }

  .table-header.sortable {
    @apply cursor-pointer hover:bg-gray-100 transition-colors;
  }

  .table-header.sorted {
    @apply bg-blue-50 text-blue-700;
  }

  .sort-indicator {
    @apply ml-2 text-blue-600;
  }

  .table-row {
    @apply border-b border-gray-200 hover:bg-gray-50 transition-colors;
  }

  .table-row.clickable {
    @apply cursor-pointer;
  }

  .table-row:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
  }

  .table-cell {
    @apply px-4 py-3 text-gray-700;
  }

  .empty-state {
    @apply text-center py-8 text-gray-500;
  }

  .pagination {
    @apply flex items-center justify-between mt-4;
  }

  .pagination-btn {
    @apply px-4 py-2 border border-gray-300 rounded-lg bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors;
  }

  .pagination-info {
    @apply text-sm text-gray-600;
  }

  .sr-only {
    @apply sr-only;
  }
</style>

Step 3: Type Definitions

// src/lib/components/data-table/DataTable.types.ts
export interface TableColumn {
  key: string;
  label: string;
  render?: (value: any, row: TableData) => string;
  sortable?: boolean;
}

export interface TableData {
  [key: string]: any;
  id?: string | number;
}

export interface DataTableProps {
  columns: TableColumn[];
  data: TableData[];
  loading?: boolean;
  sortable?: boolean;
  filterable?: boolean;
  pageSize?: number;
  onRowClick?: (row: TableData) => void;
}

Step 4: Usage Example

<!-- src/routes/users/+page.svelte -->
<script lang="ts">
  import DataTable from '$lib/components/data-table/DataTable.svelte';
  import type { TableColumn, TableData } from '$lib/components/data-table/DataTable.types';

  let users = $state<TableData[]>([]);
  let loading = $state(true);

  const columns: TableColumn[] = [
    { key: 'id', label: 'ID', sortable: true },
    { key: 'name', label: 'Name', sortable: true },
    { key: 'email', label: 'Email', sortable: true },
    { 
      key: 'role', 
      label: 'Role',
      render: (value) => `<span class="badge badge-${value}">${value}</span>`
    },
    { key: 'createdAt', label: 'Created', sortable: true }
  ];

  async function loadUsers() {
    try {
      loading = true;
      const response = await fetch('/api/users');
      if (!response.ok) throw new Error('Failed to load users');
      users = await response.json();
    } catch (error) {
      console.error('Error loading users:', error);
    } finally {
      loading = false;
    }
  }

  function handleRowClick(user: TableData) {
    // Navigate to user detail page
    window.location.href = `/users/${user.id}`;
  }

  onMount(() => {
    loadUsers();
  });
</script>

<div class="users-page">
  <h1>Users Management</h1>
  <DataTable
    {columns}
    data={users}
    {loading}
    sortable={true}
    filterable={true}
    pageSize={10}
    onRowClick={handleRowClick}
  />
</div>

This example demonstrates:

Real-world context: A production-ready data table for user management
State management: Proper use of Svelte 5 runes ($state, $derived)
User interaction: Sorting, filtering, pagination, and row clicks
Edge cases: Empty states, loading states, error handling
Accessibility: ARIA labels, keyboard navigation, semantic HTML
Performance: Derived state for efficient filtering and sorting

Common Issues / Troubleshooting

Issue 1: Components not found after generation

Error message: Cannot find module '$lib/components/Button'

Solution: Ensure your lomer.config.js matches your SvelteKit alias configuration. Check vite.config.js or svelte.config.js:

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';

export default {
  plugins: [sveltekit()],
  resolve: {
    alias: {
      $lib: path.resolve('./src/lib')
    }
  }
}

Prevention: Run lomer init after setting up your SvelteKit project to auto-detect paths.

Issue 2: TypeScript errors in generated components

Error message: Property 'variant' does not exist on type 'ComponentProps<Button>'

Solution: Ensure you're using Svelte 5 with runes enabled. Update your component to use $props():

<script lang="ts">
  // Svelte 5 syntax
  let { variant = 'primary' }: { variant?: string } = $props();
</script>

Debugging tip: Check your package.json for Svelte version. lomer-ui requires Svelte 5+ for full TypeScript support.

Issue 3: Generated components don't match project style

Solution: Create custom templates. See the "Custom Templates" section below.

Prevention: Configure lomer.config.js with your preferred structure before generating components.

Issue 4: CLI command not found

Error message: 'lomer' is not recognized as an internal or external command

Solution:

For global install: Ensure npm global bin is in your PATH
For local install: Use npx lomer or add to package.json scripts:

{
  "scripts": {
    "generate:component": "lomer generate"
  }
}

Version conflicts: If using different Node versions, consider using nvm or ensure consistent Node.js version across team.

Next Steps

Custom Templates: Learn to create reusable component templates for your team's specific patterns
Component Library: Build a complete design system with lomer-ui scaffolding
Integration: Explore integrating lomer-ui with Storybook for component documentation
Automation: Set up pre-commit hooks to enforce component structure standards

Practice suggestions:

Create a set of 5-10 commonly used components (Button, Input, Modal, Card, etc.)
Build a component library documentation site
Implement a design system with consistent styling patterns

Related libraries:

@storybook/svelte - Component documentation and testing
svelte-check - TypeScript checking for Svelte projects
prettier-plugin-svelte - Code formatting for generated components

Summary

This guide covered setting up lomer-ui CLI for advanced component scaffolding in Svelte projects. You learned how to generate production-ready components with TypeScript, proper state management, accessibility features, and error handling. You should now be able to scaffold complex components like the DataTable example and customize the generation process to match your project's needs.

Building Native Mobile Features with Capacitor and ionic-svelte in Svelte

Ethan Walker — Fri, 09 Jan 2026 11:47:41 +0000

ionic-svelte provides seamless integration between Ionic's mobile UI components and Svelte, enabling developers to build cross-platform mobile applications with native device capabilities. This article covers integrating Capacitor to access native device features like camera, geolocation, and push notifications. This is part 11 of a series on using ionic-svelte with Svelte.

This guide walks through creating a production-ready mobile application with native device integration using ionic-svelte, Capacitor, and Svelte, from initial setup to implementing real-world native features.

Prerequisites

Before starting, ensure you have:

A SvelteKit project (SvelteKit 1.0+ or standalone Svelte 4+)
Node.js 18+ and npm/pnpm/yarn
Basic understanding of Svelte components, stores, and lifecycle
Familiarity with mobile development concepts
Android Studio (for Android development) or Xcode (for iOS development) - optional but recommended for testing

Action example: The setupIonicBase() function initializes Ionic's base styles and configuration, making all Ionic components available throughout your Svelte application. The @ionic/core package provides web components that work seamlessly with Svelte's reactivity system.

Installation

Install ionic-svelte, Ionic Core, and Capacitor:

npm install @ionic/core ionic-svelte @capacitor/core @capacitor/cli
npm install @capacitor/ios @capacitor/android

For specific native features, install the corresponding Capacitor plugins:

npm install @capacitor/camera @capacitor/geolocation @capacitor/push-notifications
npm install @capacitor/status-bar @capacitor/splash-screen

Project Setup

First, configure your SvelteKit project to work with Ionic. Create the main layout file:

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  import { setupIonicBase } from 'ionic-svelte';
  import '../theme/variables.css';
  import 'ionic-svelte/components/all';

  onMount(() => {
    setupIonicBase();
  });
</script>

<ion-app>
  <slot />
</ion-app>

Disable server-side rendering in the layout server file:

// src/routes/+layout.ts
export const ssr = false;

Create the Ionic theme variables file:

/* src/theme/variables.css */
:root {
  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;

  --ion-color-secondary: #3dc2ff;
  --ion-color-secondary-rgb: 61, 194, 255;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #36abe0;
  --ion-color-secondary-tint: #50c8ff;
}

Initialize Capacitor in your project:

npx cap init

This will prompt you for app details. Then add platforms:

npx cap add ios
npx cap add android

Create the Capacitor configuration file:

// capacitor.config.ts
import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'My Ionic Svelte App',
  webDir: 'build',
  server: {
    androidScheme: 'https'
  },
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      launchAutoHide: true,
      backgroundColor: "#3880ff",
      androidSplashResourceName: "splash",
      androidScaleType: "CENTER_CROP",
      showSpinner: true,
      androidSpinnerStyle: "large",
      iosSpinnerStyle: "small",
      spinnerColor: "#999999"
    }
  }
};

export default config;

First Example / Basic Usage

Let's start with a simple example that checks if the app is running on a native platform:

<!-- src/routes/+page.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  import { Capacitor } from '@capacitor/core';
  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton } from 'ionic-svelte';

  let platform = 'web';
  let isNative = false;

  onMount(() => {
    platform = Capacitor.getPlatform();
    isNative = Capacitor.isNativePlatform();
  });
</script>

<IonPage>
  <IonHeader>
    <IonToolbar>
      <IonTitle>Native Features Demo</IonTitle>
    </IonToolbar>
  </IonHeader>

  <IonContent class="ion-padding">
    <h2>Platform: {platform}</h2>
    <p>Is Native: {isNative ? 'Yes' : 'No'}</p>

    <IonButton expand="block" color="primary">
      Get Started
    </IonButton>
  </IonContent>
</IonPage>

This example demonstrates how to detect the platform and conditionally enable native features. The Capacitor.getPlatform() method returns 'ios', 'android', or 'web', while Capacitor.isNativePlatform() returns a boolean indicating if the app is running on a native device.

Understanding the Basics

Ionic components in Svelte work as web components, which means they integrate seamlessly with Svelte's reactivity. The ionic-svelte package provides Svelte-specific wrappers for complex components like navigation, tabs, and modals.

Key concepts:

Platform Detection: Use Capacitor to detect the current platform and conditionally render features
Plugin Access: Capacitor plugins provide access to native device APIs
Lifecycle Management: Use Svelte's onMount and onDestroy to manage native resources

Here's a more advanced example showing platform-specific styling:

<!-- src/lib/PlatformAwareComponent.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  import { Capacitor } from '@capacitor/core';
  import { IonButton } from 'ionic-svelte';

  let platform: string;
  let isIOS: boolean;
  let isAndroid: boolean;

  onMount(() => {
    platform = Capacitor.getPlatform();
    isIOS = platform === 'ios';
    isAndroid = platform === 'android';
  });
</script>

<div class="platform-container" class:ios={isIOS} class:android={isAndroid}>
  <IonButton color={isIOS ? 'primary' : 'secondary'}>
    Platform-Specific Button
  </IonButton>
</div>

<style>
  .platform-container.ios {
    --ion-color-primary: #007aff;
  }

  .platform-container.android {
    --ion-color-primary: #3880ff;
  }
</style>

Practical Example / Building Something Real

Let's build a complete feature that uses the camera, geolocation, and displays the data in an Ionic interface:

<!-- src/routes/camera-demo/+page.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
  import { Geolocation, Position } from '@capacitor/geolocation';
  import { 
    IonPage, 
    IonHeader, 
    IonToolbar, 
    IonTitle, 
    IonContent, 
    IonButton,
    IonCard,
    IonCardHeader,
    IonCardTitle,
    IonCardContent,
    IonImg,
    IonItem,
    IonLabel
  } from 'ionic-svelte';

  interface PhotoData {
    webPath: string;
    format: string;
  }

  interface LocationData {
    latitude: number;
    longitude: number;
    accuracy: number;
  }

  let photo: PhotoData | null = null;
  let location: LocationData | null = null;
  let loading = false;
  let error: string | null = null;

  async function takePicture() {
    try {
      loading = true;
      error = null;

      const image = await Camera.getPhoto({
        quality: 90,
        allowEditing: false,
        resultType: CameraResultType.Uri,
        source: CameraSource.Camera
      });

      photo = {
        webPath: image.webPath || '',
        format: image.format || 'jpeg'
      };
    } catch (err: any) {
      error = err.message || 'Failed to take picture';
      console.error('Camera error:', err);
    } finally {
      loading = false;
    }
  }

  async function getCurrentLocation() {
    try {
      loading = true;
      error = null;

      const position: Position = await Geolocation.getCurrentPosition({
        enableHighAccuracy: true,
        timeout: 10000
      });

      location = {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
        accuracy: position.coords.accuracy || 0
      };
    } catch (err: any) {
      error = err.message || 'Failed to get location';
      console.error('Geolocation error:', err);
    } finally {
      loading = false;
    }
  }

  async function requestPermissions() {
    try {
      await Camera.requestPermissions();
      await Geolocation.requestPermissions();
    } catch (err: any) {
      error = 'Permission request failed: ' + err.message;
    }
  }

  onMount(() => {
    requestPermissions();
  });
</script>

<IonPage>
  <IonHeader>
    <IonToolbar>
      <IonTitle>Camera & Location Demo</IonTitle>
    </IonToolbar>
  </IonHeader>

  <IonContent class="ion-padding">
    {#if error}
      <IonCard color="danger">
        <IonCardHeader>
          <IonCardTitle>Error</IonCardTitle>
        </IonCardHeader>
        <IonCardContent>
          {error}
        </IonCardContent>
      </IonCard>
    {/if}

    <IonCard>
      <IonCardHeader>
        <IonCardTitle>Camera</IonCardTitle>
      </IonCardHeader>
      <IonCardContent>
        <IonButton 
          expand="block" 
          color="primary" 
          on:click={takePicture}
          disabled={loading}
        >
          {loading ? 'Processing...' : 'Take Picture'}
        </IonButton>

        {#if photo}
          <div class="photo-container">
            <IonImg src={photo.webPath} alt="Captured photo" />
          </div>
        {/if}
      </IonCardContent>
    </IonCard>

    <IonCard>
      <IonCardHeader>
        <IonCardTitle>Geolocation</IonCardTitle>
      </IonCardHeader>
      <IonCardContent>
        <IonButton 
          expand="block" 
          color="secondary" 
          on:click={getCurrentLocation}
          disabled={loading}
        >
          {loading ? 'Getting location...' : 'Get Current Location'}
        </IonButton>

        {#if location}
          <IonItem>
            <IonLabel>
              <h2>Latitude</h2>
              <p>{location.latitude.toFixed(6)}</p>
            </IonLabel>
          </IonItem>
          <IonItem>
            <IonLabel>
              <h2>Longitude</h2>
              <p>{location.longitude.toFixed(6)}</p>
            </IonLabel>
          </IonItem>
          <IonItem>
            <IonLabel>
              <h2>Accuracy</h2>
              <p>{location.accuracy.toFixed(2)} meters</p>
            </IonLabel>
          </IonItem>
        {/if}
      </IonCardContent>
    </IonCard>
  </IonContent>
</IonPage>

<style>
  .photo-container {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
  }

  .photo-container :global(img) {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }
</style>

This example demonstrates:

Camera Integration: Using Capacitor's Camera plugin to capture photos
Geolocation: Getting the device's current location with high accuracy
Permission Handling: Requesting necessary permissions on mount
Error Handling: Proper error states and user feedback
Ionic UI Components: Using Ionic cards, buttons, and layout components
Loading States: Managing async operations with loading indicators

Common Issues / Troubleshooting

Issue 1: Components not rendering correctly

Problem: Ionic components appear unstyled or don't work properly.

Solution: Ensure you've called setupIonicBase() in your layout and imported the CSS:

<script>
  import { setupIonicBase } from 'ionic-svelte';
  import '../theme/variables.css';
  import 'ionic-svelte/components/all';

  setupIonicBase();
</script>

Issue 2: Native plugins return undefined on web

Problem: Camera or Geolocation plugins return undefined when testing in browser.

Solution: These plugins only work on native platforms. Use platform detection:

import { Capacitor } from '@capacitor/core';

if (Capacitor.isNativePlatform()) {
  // Use native plugin
} else {
  // Use web fallback or mock data
}

Issue 3: Build errors when syncing with Capacitor

Problem: npx cap sync fails or build directory not found.

Solution: Ensure your build output directory matches webDir in capacitor.config.ts. For SvelteKit, update the config:

const config: CapacitorConfig = {
  webDir: '.svelte-kit/output/client', // or 'build' depending on your setup
  // ...
};

Issue 4: Permissions not working on iOS/Android

Problem: Permission requests are ignored or fail silently.

Solution: Add permission descriptions to native configuration files. For iOS, edit ios/App/App/Info.plist. For Android, edit android/app/src/main/AndroidManifest.xml.

Next Steps

Explore more Capacitor plugins: Storage, Network, App, Haptics
Learn about Ionic's navigation system with IonNav and routing
Implement push notifications for real-time updates
Add biometric authentication using Capacitor's Biometric plugin
Optimize performance with lazy loading and code splitting
Check out the Ionic documentation for component APIs
Review Capacitor plugins for more native features

Summary

You've learned how to integrate native mobile features with ionic-svelte and Capacitor. You can now detect platforms, access device cameras and geolocation, handle permissions, and build production-ready mobile applications with Svelte. The combination of Ionic's UI components and Capacitor's native APIs provides a powerful foundation for cross-platform mobile development.

Building Advanced Data Tables with Server-Side Processing in flowbite-svelte and Svelte

Ethan Walker — Fri, 09 Jan 2026 11:46:32 +0000

flowbite-svelte is a comprehensive UI component library built on Tailwind CSS that provides production-ready Svelte components for building modern web applications. This article covers building advanced data tables with server-side processing, real-time updates, and complex state management. This is part 4 of a series on using flowbite-svelte with Svelte.

This guide walks through creating a production-ready data table system with server-side pagination, sorting, filtering, and real-time data synchronization using flowbite-svelte components and Svelte stores.

Prerequisites

Before starting, ensure you have:

A SvelteKit project (SvelteKit 1.0+ or standalone Svelte 4+)
Node.js 18+ and npm/pnpm/yarn
Tailwind CSS configured in your project
Understanding of Svelte stores, reactivity, and async operations
Basic knowledge of REST APIs and server-side data processing

Installation

Install flowbite-svelte and required dependencies:

npm install flowbite-svelte flowbite
npm install -D tailwindcss postcss autoprefixer
npm install -D @flowbite-svelte-plugins/datatable

For icon support:

npm install -D flowbite-svelte-icons

Project Setup

Configure Tailwind CSS to include flowbite-svelte:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/**/*.{html,js,svelte,ts}',
    './node_modules/flowbite-svelte/**/*.{svelte,js,ts}'
  ],
  theme: {
    extend: {},
  },
  plugins: [require('flowbite/plugin')],
  darkMode: 'class',
}

Add Tailwind directives to your main CSS file:

/* src/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Import the CSS in your layout:

<!-- src/routes/+layout.svelte -->
<script>
  import '../app.css';
</script>

<slot />

First Example / Basic Usage

Let's start with a simple server-side data table:

<!-- src/lib/ServerDataTable.svelte -->
<script lang="ts">
  import { 
    TableHead, 
    TableHeadCell, 
    TableBody, 
    TableBodyRow, 
    TableBodyCell,
    Button,
    Spinner
  } from 'flowbite-svelte';

  interface TableData {
    id: string;
    name: string;
    email: string;
    role: string;
    createdAt: string;
  }

  interface TableState {
    data: TableData[];
    loading: boolean;
    page: number;
    pageSize: number;
    total: number;
    sortBy: string;
    sortOrder: 'asc' | 'desc';
  }

  export let apiUrl = '/api/users';
  export let pageSize = 10;

  let state: TableState = $state({
    data: [],
    loading: false,
    page: 1,
    pageSize,
    total: 0,
    sortBy: 'createdAt',
    sortOrder: 'desc'
  });

  async function fetchData() {
    state.loading = true;
    try {
      const params = new URLSearchParams({
        page: state.page.toString(),
        pageSize: state.pageSize.toString(),
        sortBy: state.sortBy,
        sortOrder: state.sortOrder
      });

      const response = await fetch(`${apiUrl}?${params}`);
      const result = await response.json();

      state.data = result.data;
      state.total = result.total;
    } catch (error) {
      console.error('Failed to fetch data:', error);
    } finally {
      state.loading = false;
    }
  }

  function handleSort(column: string) {
    if (state.sortBy === column) {
      state.sortOrder = state.sortOrder === 'asc' ? 'desc' : 'asc';
    } else {
      state.sortBy = column;
      state.sortOrder = 'asc';
    }
    fetchData();
  }

  function handlePageChange(newPage: number) {
    state.page = newPage;
    fetchData();
  }

  $effect(() => {
    fetchData();
  });
</script>

<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
  {#if state.loading}
    <div class="flex justify-center items-center p-8">
      <Spinner size="xl" />
    </div>
  {:else}
    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
      <TableHead>
        <TableHeadCell>
          <button 
            class="flex items-center"
            on:click={() => handleSort('name')}
          >
            Name
            {#if state.sortBy === 'name'}
              <span class="ml-1">
                {state.sortOrder === 'asc' ? '↑' : '↓'}
              </span>
            {/if}
          </button>
        </TableHeadCell>
        <TableHeadCell>
          <button 
            class="flex items-center"
            on:click={() => handleSort('email')}
          >
            Email
            {#if state.sortBy === 'email'}
              <span class="ml-1">
                {state.sortOrder === 'asc' ? '↑' : '↓'}
              </span>
            {/if}
          </button>
        </TableHeadCell>
        <TableHeadCell>
          <button 
            class="flex items-center"
            on:click={() => handleSort('role')}
          >
            Role
            {#if state.sortBy === 'role'}
              <span class="ml-1">
                {state.sortOrder === 'asc' ? '↑' : '↓'}
              </span>
            {/if}
          </button>
        </TableHeadCell>
        <TableHeadCell>
          <button 
            class="flex items-center"
            on:click={() => handleSort('createdAt')}
          >
            Created
            {#if state.sortBy === 'createdAt'}
              <span class="ml-1">
                {state.sortOrder === 'asc' ? '↑' : '↓'}
              </span>
            {/if}
          </button>
        </TableHeadCell>
      </TableHead>
      <TableBody>
        {#each state.data as item (item.id)}
          <TableBodyRow>
            <TableBodyCell class="font-medium text-gray-900 dark:text-white">
              {item.name}
            </TableBodyCell>
            <TableBodyCell>{item.email}</TableBodyCell>
            <TableBodyCell>{item.role}</TableBodyCell>
            <TableBodyCell>
              {new Date(item.createdAt).toLocaleDateString()}
            </TableBodyCell>
          </TableBodyRow>
        {/each}
      </TableBody>
    </table>
  {/if}

  <div class="flex items-center justify-between p-4">
    <div class="text-sm text-gray-700 dark:text-gray-400">
      Showing {(state.page - 1) * state.pageSize + 1} to 
      {Math.min(state.page * state.pageSize, state.total)} of {state.total} entries
    </div>
    <div class="flex gap-2">
      <Button 
        size="xs" 
        disabled={state.page === 1}
        on:click={() => handlePageChange(state.page - 1)}
      >
        Previous
      </Button>
      <Button 
        size="xs" 
        disabled={state.page * state.pageSize >= state.total}
        on:click={() => handlePageChange(state.page + 1)}
      >
        Next
      </Button>
    </div>
  </div>
</div>

Using the component:

<!-- src/routes/+page.svelte -->
<script>
  import ServerDataTable from '$lib/ServerDataTable.svelte';
</script>

<div class="p-6">
  <h1 class="text-2xl font-bold mb-4">Users Table</h1>
  <ServerDataTable apiUrl="/api/users" pageSize={10} />
</div>

This example demonstrates a basic server-side data table with sorting and pagination. The component fetches data from an API endpoint, handles loading states, and provides interactive sorting controls.

Understanding the Basics

flowbite-svelte provides several approaches for building data tables:

Basic Table Components - TableHead, TableBody, TableBodyRow, etc. for custom implementations
DataTable Plugin - @flowbite-svelte-plugins/datatable for feature-rich tables
Server-Side Processing - Custom implementation with API integration

For advanced use cases with server-side processing, we use the basic components because they provide:

Full control over data fetching logic
Custom state management
Integration with Svelte stores
Real-time update capabilities

Key concepts:

Reactive State - Using $state for reactive table state
Effects - Using $effect to trigger data fetching on state changes
Server-Side Pagination - Fetching only the current page from the server
Sorting - Sending sort parameters to the server

Practical Example / Building Something Real

Let's create a complete advanced data table system with filtering, real-time updates, and state management:

// src/stores/dataTableStore.ts
import { writable, derived } from 'svelte/store';

export interface TableFilters {
  search?: string;
  role?: string;
  dateFrom?: string;
  dateTo?: string;
}

export interface TableState {
  page: number;
  pageSize: number;
  sortBy: string;
  sortOrder: 'asc' | 'desc';
  filters: TableFilters;
}

function createDataTableStore(initialState: Partial<TableState> = {}) {
  const { subscribe, update, set } = writable<TableState>({
    page: 1,
    pageSize: 10,
    sortBy: 'createdAt',
    sortOrder: 'desc',
    filters: {},
    ...initialState
  });

  return {
    subscribe,
    setPage: (page: number) => update(s => ({ ...s, page })),
    setPageSize: (size: number) => update(s => ({ ...s, pageSize: size, page: 1 })),
    setSort: (sortBy: string, sortOrder: 'asc' | 'desc') => 
      update(s => ({ ...s, sortBy, sortOrder, page: 1 })),
    setFilters: (filters: TableFilters) => 
      update(s => ({ ...s, filters, page: 1 })),
    reset: () => set({
      page: 1,
      pageSize: 10,
      sortBy: 'createdAt',
      sortOrder: 'desc',
      filters: {}
    })
  };
}

export const createTableStore = createDataTableStore;

Create the advanced table component:

<!-- src/lib/AdvancedDataTable.svelte -->
<script lang="ts">
  import { 
    TableHead, 
    TableHeadCell, 
    TableBody, 
    TableBodyRow, 
    TableBodyCell,
    Button,
    Input,
    Select,
    Spinner,
    Badge
  } from 'flowbite-svelte';
  import { createTableStore, type TableFilters } from '$stores/dataTableStore';
  import { onMount } from 'svelte';

  interface TableData {
    id: string;
    name: string;
    email: string;
    role: string;
    status: 'active' | 'inactive';
    createdAt: string;
  }

  interface ApiResponse {
    data: TableData[];
    total: number;
    page: number;
    pageSize: number;
  }

  export let apiUrl = '/api/users';
  export let pageSize = 10;
  export let enableRealtime = false;

  const tableStore = createTableStore({ pageSize });
  let tableState = $state({ data: [] as TableData[], total: 0, loading: false });
  let filters = $state<TableFilters>({});
  let searchDebounceTimer: ReturnType<typeof setTimeout>;

  async function fetchData() {
    tableState.loading = true;
    try {
      const state = $state.snapshot(tableStore);
      const params = new URLSearchParams({
        page: state.page.toString(),
        pageSize: state.pageSize.toString(),
        sortBy: state.sortBy,
        sortOrder: state.sortOrder,
        ...Object.entries(state.filters).reduce((acc, [key, value]) => {
          if (value) acc[key] = value.toString();
          return acc;
        }, {} as Record<string, string>)
      });

      const response = await fetch(`${apiUrl}?${params}`);
      if (!response.ok) throw new Error('Failed to fetch data');

      const result: ApiResponse = await response.json();
      tableState.data = result.data;
      tableState.total = result.total;
    } catch (error) {
      console.error('Failed to fetch data:', error);
    } finally {
      tableState.loading = false;
    }
  }

  function handleSort(column: string) {
    const state = $state.snapshot(tableStore);
    const newOrder = state.sortBy === column && state.sortOrder === 'asc' 
      ? 'desc' 
      : 'asc';
    tableStore.setSort(column, newOrder);
  }

  function handleFilterChange(key: keyof TableFilters, value: string) {
    filters = { ...filters, [key]: value || undefined };

    if (key === 'search') {
      clearTimeout(searchDebounceTimer);
      searchDebounceTimer = setTimeout(() => {
        tableStore.setFilters(filters);
      }, 300);
    } else {
      tableStore.setFilters(filters);
    }
  }

  function handlePageChange(newPage: number) {
    tableStore.setPage(newPage);
  }

  function handlePageSizeChange(size: number) {
    tableStore.setPageSize(size);
  }

  // Subscribe to store changes and refetch data
  $effect(() => {
    const unsubscribe = tableStore.subscribe(() => {
      fetchData();
    });
    return unsubscribe;
  });

  // Real-time updates using polling
  let pollInterval: ReturnType<typeof setInterval>;

  onMount(() => {
    fetchData();

    if (enableRealtime) {
      pollInterval = setInterval(() => {
        fetchData();
      }, 5000); // Poll every 5 seconds
    }

    return () => {
      if (pollInterval) clearInterval(pollInterval);
      clearTimeout(searchDebounceTimer);
    };
  });

  $: currentState = $state.snapshot(tableStore);
  $: totalPages = Math.ceil(tableState.total / currentState.pageSize);
  $: startItem = (currentState.page - 1) * currentState.pageSize + 1;
  $: endItem = Math.min(currentState.page * currentState.pageSize, tableState.total);
</script>

<div class="space-y-4">
  <!-- Filters -->
  <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
      <div>
        <Input
          placeholder="Search..."
          bind:value={filters.search}
          on:input={(e) => handleFilterChange('search', e.target.value)}
        />
      </div>
      <div>
        <Select
          bind:value={filters.role}
          on:change={(e) => handleFilterChange('role', e.target.value)}
        >
          <option value="">All Roles</option>
          <option value="admin">Admin</option>
          <option value="user">User</option>
          <option value="moderator">Moderator</option>
        </Select>
      </div>
      <div>
        <Input
          type="date"
          placeholder="From Date"
          bind:value={filters.dateFrom}
          on:input={(e) => handleFilterChange('dateFrom', e.target.value)}
        />
      </div>
      <div>
        <Input
          type="date"
          placeholder="To Date"
          bind:value={filters.dateTo}
          on:input={(e) => handleFilterChange('dateTo', e.target.value)}
        />
      </div>
    </div>
  </div>

  <!-- Table -->
  <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
    {#if tableState.loading && tableState.data.length === 0}
      <div class="flex justify-center items-center p-8">
        <Spinner size="xl" />
      </div>
    {:else}
      <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
        <TableHead>
          <TableHeadCell>
            <button 
              class="flex items-center hover:text-gray-900 dark:hover:text-white"
              on:click={() => handleSort('name')}
            >
              Name
              {#if currentState.sortBy === 'name'}
                <span class="ml-1 text-gray-900 dark:text-white">
                  {currentState.sortOrder === 'asc' ? '↑' : '↓'}
                </span>
              {/if}
            </button>
          </TableHeadCell>
          <TableHeadCell>
            <button 
              class="flex items-center hover:text-gray-900 dark:hover:text-white"
              on:click={() => handleSort('email')}
            >
              Email
              {#if currentState.sortBy === 'email'}
                <span class="ml-1 text-gray-900 dark:text-white">
                  {currentState.sortOrder === 'asc' ? '↑' : '↓'}
                </span>
              {/if}
            </button>
          </TableHeadCell>
          <TableHeadCell>
            <button 
              class="flex items-center hover:text-gray-900 dark:hover:text-white"
              on:click={() => handleSort('role')}
            >
              Role
              {#if currentState.sortBy === 'role'}
                <span class="ml-1 text-gray-900 dark:text-white">
                  {currentState.sortOrder === 'asc' ? '↑' : '↓'}
                </span>
              {/if}
            </button>
          </TableHeadCell>
          <TableHeadCell>Status</TableHeadCell>
          <TableHeadCell>
            <button 
              class="flex items-center hover:text-gray-900 dark:hover:text-white"
              on:click={() => handleSort('createdAt')}
            >
              Created
              {#if currentState.sortBy === 'createdAt'}
                <span class="ml-1 text-gray-900 dark:text-white">
                  {currentState.sortOrder === 'asc' ? '↑' : '↓'}
                </span>
              {/if}
            </button>
          </TableHeadCell>
        </TableHead>
        <TableBody>
          {#each tableState.data as item (item.id)}
            <TableBodyRow class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600">
              <TableBodyCell class="font-medium text-gray-900 dark:text-white">
                {item.name}
              </TableBodyCell>
              <TableBodyCell>{item.email}</TableBodyCell>
              <TableBodyCell>
                <Badge color="info">{item.role}</Badge>
              </TableBodyCell>
              <TableBodyCell>
                <Badge color={item.status === 'active' ? 'success' : 'warning'}>
                  {item.status}
                </Badge>
              </TableBodyCell>
              <TableBodyCell>
                {new Date(item.createdAt).toLocaleDateString()}
              </TableBodyCell>
            </TableBodyRow>
          {/each}
        </TableBody>
      </table>
    {/if}
  </div>

  <!-- Pagination -->
  <div class="flex flex-col sm:flex-row items-center justify-between gap-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
    <div class="flex items-center gap-4">
      <span class="text-sm text-gray-700 dark:text-gray-400">
        Show
      </span>
      <Select
        value={currentState.pageSize.toString()}
        on:change={(e) => handlePageSizeChange(Number(e.target.value))}
        class="w-20"
      >
        <option value="10">10</option>
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </Select>
      <span class="text-sm text-gray-700 dark:text-gray-400">
        entries
      </span>
    </div>

    <div class="text-sm text-gray-700 dark:text-gray-400">
      Showing <span class="font-semibold">{startItem}</span> to 
      <span class="font-semibold">{endItem}</span> of 
      <span class="font-semibold">{tableState.total}</span> entries
    </div>

    <div class="flex gap-2">
      <Button 
        size="xs" 
        color="light"
        disabled={currentState.page === 1}
        on:click={() => handlePageChange(currentState.page - 1)}
      >
        Previous
      </Button>

      {#each Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
        const page = Math.max(1, Math.min(totalPages - 4, currentState.page - 2)) + i;
        return page <= totalPages ? page : null;
      }).filter(Boolean) as page}
        <Button
          size="xs"
          color={page === currentState.page ? 'blue' : 'light'}
          on:click={() => handlePageChange(page)}
        >
          {page}
        </Button>
      {/each}

      <Button 
        size="xs" 
        color="light"
        disabled={currentState.page >= totalPages}
        on:click={() => handlePageChange(currentState.page + 1)}
      >
        Next
      </Button>
    </div>
  </div>
</div>

Example API route for SvelteKit:

// src/routes/api/users/+server.ts
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const GET: RequestHandler = async ({ url }) => {
  const page = parseInt(url.searchParams.get('page') || '1');
  const pageSize = parseInt(url.searchParams.get('pageSize') || '10');
  const sortBy = url.searchParams.get('sortBy') || 'createdAt';
  const sortOrder = url.searchParams.get('sortOrder') || 'desc';
  const search = url.searchParams.get('search') || '';
  const role = url.searchParams.get('role') || '';

  // Simulate database query
  // In production, replace with actual database query
  let data = [
    { id: '1', name: 'John Doe', email: 'john@example.com', role: 'admin', status: 'active', createdAt: '2024-01-15' },
    { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'user', status: 'active', createdAt: '2024-01-20' },
    // ... more data
  ];

  // Apply filters
  if (search) {
    data = data.filter(item => 
      item.name.toLowerCase().includes(search.toLowerCase()) ||
      item.email.toLowerCase().includes(search.toLowerCase())
    );
  }

  if (role) {
    data = data.filter(item => item.role === role);
  }

  // Apply sorting
  data.sort((a, b) => {
    const aVal = a[sortBy as keyof typeof a];
    const bVal = b[sortBy as keyof typeof b];
    const comparison = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
    return sortOrder === 'asc' ? comparison : -comparison;
  });

  // Apply pagination
  const total = data.length;
  const start = (page - 1) * pageSize;
  const end = start + pageSize;
  const paginatedData = data.slice(start, end);

  return json({
    data: paginatedData,
    total,
    page,
    pageSize
  });
};

Using the advanced table:

<!-- src/routes/users/+page.svelte -->
<script>
  import AdvancedDataTable from '$lib/AdvancedDataTable.svelte';
</script>

<div class="p-6">
  <h1 class="text-2xl font-bold mb-4">Users Management</h1>
  <AdvancedDataTable 
    apiUrl="/api/users" 
    pageSize={10}
    enableRealtime={true}
  />
</div>

This example demonstrates a complete advanced data table system with:

Server-side pagination, sorting, and filtering
Debounced search input
Real-time data updates via polling
Centralized state management with Svelte stores
Loading states and error handling
Responsive design with Tailwind CSS

Common Issues / Troubleshooting

Table not updating after state changes
- Ensure you're subscribing to the store properly using $effect or reactive statements
- Check that the store's set methods trigger reactivity correctly
- Verify that fetchData() is called when state changes
Performance issues with large datasets
- Implement proper debouncing for search inputs (300ms recommended)
- Use server-side pagination instead of loading all data
- Consider virtual scrolling for very large datasets
- Limit real-time polling frequency (5+ seconds)
Sorting not working correctly
- Verify that your API endpoint handles sort parameters correctly
- Check that sort state is properly reset when changing sort column
- Ensure sort order toggles correctly (asc ↔ desc)
Filters not applying
- Check that filter values are properly sent to the API
- Verify URLSearchParams construction includes all filter keys
- Ensure the API endpoint processes all filter parameters

Next Steps

Add column visibility toggles: Allow users to show/hide columns
Implement export functionality: Add CSV/Excel export for table data
Add bulk actions: Implement row selection and bulk operations
Integrate WebSocket: Replace polling with WebSocket for true real-time updates
Add advanced filtering: Implement date range pickers and multi-select filters
Optimize with caching: Add response caching to reduce server load

Summary

In this article, we created an advanced data table system using flowbite-svelte with server-side processing, real-time updates, and comprehensive state management. The system includes pagination, sorting, filtering, and real-time synchronization, providing a production-ready solution for managing large datasets in Svelte applications.

Building Advanced Modal Systems with State Management in daisyUI and Svelte

Ethan Walker — Fri, 09 Jan 2026 11:44:45 +0000

daisyUI is a popular Tailwind CSS component library that provides ready-to-use component classes for rapid UI development. When combined with Svelte, it enables developers to create dynamic and accessible applications. This article covers building an advanced modal system with state management through Svelte stores, nested modal support, animations, and full accessibility. This is part 17 of a series on using daisyUI with Svelte.

This guide walks through creating a production-ready modal system with centralized state management, modal stack support, automatic focus trapping, and keyboard handling.

Prerequisites

Before starting, ensure you have:

A Svelte project (SvelteKit or standalone Svelte 4+)
Node.js 18+ and npm/pnpm/yarn
Tailwind CSS configured in your project
Understanding of Svelte stores and reactivity
Basic familiarity with accessibility concepts (ARIA, focus management)

Installation

Install daisyUI as a Tailwind CSS plugin:

npm install -D daisyui
# or
pnpm add -D daisyui
# or
yarn add -D daisyui

daisyUI works on top of Tailwind CSS, so make sure Tailwind CSS is already installed in your project.

Project Setup

Configure daisyUI in your Tailwind CSS configuration:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/**/*.{html,js,svelte,ts}',
  ],
  theme: {
    extend: {},
  },
  plugins: [require('daisyui')],
  daisyui: {
    themes: ['light', 'dark', 'cupcake'],
    darkTheme: 'dark',
    base: true,
    styled: true,
    utils: true,
  },
}

Add Tailwind directives to your main CSS file:

/* src/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Import the CSS in your layout:

<!-- src/routes/+layout.svelte -->
<script>
  import '../app.css';
</script>

<slot />

First Example / Basic Usage

Let's start with a simple modal controlled through a Svelte store:

<!-- src/lib/Modal.svelte -->
<script>
  import { createEventDispatcher } from 'svelte';

  export let open = false;
  export let title = 'Modal Title';
  export let size = 'md'; // sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, full

  const dispatch = createEventDispatcher();

  let dialogElement;

  $: if (dialogElement) {
    if (open) {
      dialogElement.showModal();
    } else {
      dialogElement.close();
    }
  }

  function handleClose() {
    open = false;
    dispatch('close');
  }

  function handleBackdropClick(event) {
    if (event.target === dialogElement) {
      handleClose();
    }
  }
</script>

<dialog
  bind:this={dialogElement}
  class="modal"
  on:click={handleBackdropClick}
  on:close={handleClose}
>
  <div class="modal-box" class:modal-{size}>
    <form method="dialog">
      <button
        class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
        aria-label="Close modal"
      >
        ✕
      </button>
    </form>
    <h3 class="font-bold text-lg mb-4">{title}</h3>
    <slot />
    <div class="modal-action">
      <slot name="actions" />
    </div>
  </div>
  <form method="dialog" class="modal-backdrop">
    <button>close</button>
  </form>
</dialog>

Using the component:

<!-- src/routes/+page.svelte -->
<script>
  import Modal from '$lib/Modal.svelte';

  let isOpen = false;
</script>

<button class="btn btn-primary" on:click={() => isOpen = true}>
  Open Modal
</button>

<Modal bind:open={isOpen} title="Welcome">
  <p>This is a simple modal dialog.</p>
  <svelte:fragment slot="actions">
    <button class="btn" on:click={() => isOpen = false}>Close</button>
  </svelte:fragment>
</Modal>

This example demonstrates a basic modal using the HTML5 <dialog> element. The component automatically opens and closes when the open prop changes, supports closing on backdrop click and ESC key.

Understanding the Basics

daisyUI provides two approaches to creating modals:

Checkbox-based modals — use a hidden checkbox to control state
Dialog-based modals — use the native HTML5 <dialog> element

For an advanced system with programmatic control, we use the <dialog> element because it provides:

Native API (showModal(), close())
Automatic focus trapping
ESC key support
Better accessibility out of the box

Key daisyUI classes for modals:

modal — main container
modal-box — modal content
modal-backdrop — darkened background
modal-action — area for action buttons
modal-{size} — modal sizes

Practical Example / Building Something Real

Let's create a complete modal management system using a Svelte store:

// src/stores/modalStore.ts
import { writable } from 'svelte/store';

export interface ModalConfig {
  id: string;
  component: any;
  props?: Record<string, any>;
  size?: string;
  closable?: boolean;
}

interface ModalState {
  modals: ModalConfig[];
}

function createModalStore() {
  const { subscribe, update, set } = writable<ModalState>({ modals: [] });

  return {
    subscribe,
    open: (config: ModalConfig) => {
      update((state) => ({
        modals: [...state.modals, config],
      }));
    },
    close: (id: string) => {
      update((state) => ({
        modals: state.modals.filter((modal) => modal.id !== id),
      }));
    },
    closeAll: () => {
      set({ modals: [] });
    },
    closeLast: () => {
      update((state) => {
        const newModals = [...state.modals];
        newModals.pop();
        return { modals: newModals };
      });
    },
  };
}

export const modalStore = createModalStore();

Create a universal modal container component:

<!-- src/lib/ModalContainer.svelte -->
<script>
  import { modalStore } from '$stores/modalStore';
  import { onMount } from 'svelte';

  let dialogElements: Map<string, HTMLDialogElement> = new Map();
  let previousActiveElement: HTMLElement | null = null;

  $: modals = $modalStore.modals;

  function handleClose(id: string) {
    modalStore.close(id);
    // Restore focus to previous element
    if (previousActiveElement) {
      previousActiveElement.focus();
      previousActiveElement = null;
    }
  }

  function handleBackdropClick(event: MouseEvent, id: string) {
    const dialog = dialogElements.get(id);
    if (dialog && event.target === dialog) {
      handleClose(id);
    }
  }

  function handleKeyDown(event: KeyboardEvent, id: string) {
    if (event.key === 'Escape') {
      const lastModal = modals[modals.length - 1];
      if (lastModal?.id === id) {
        handleClose(id);
      }
    }
  }

  $: {
    // Manage modal opening/closing
    modals.forEach((modal) => {
      const dialog = dialogElements.get(modal.id);
      if (dialog) {
        if (!dialog.open) {
          // Save active element before opening
          previousActiveElement = document.activeElement as HTMLElement;
          dialog.showModal();
        }
      }
    });

    // Close modals that are no longer in the list
    dialogElements.forEach((dialog, id) => {
      if (!modals.find((m) => m.id === id)) {
        dialog.close();
      }
    });
  }
</script>

{#each modals as modal, index (modal.id)}
  {@const Component = modal.component}
  {@const isLast = index === modals.length - 1}

  <dialog
    bind:this={dialogElements.get(modal.id) || undefined}
    class="modal"
    class:modal-open={isLast}
    on:click={(e) => handleBackdropClick(e, modal.id)}
    on:keydown={(e) => handleKeyDown(e, modal.id)}
    data-modal-id={modal.id}
    aria-labelledby="modal-title-{modal.id}"
    aria-modal="true"
    role="dialog"
  >
    <div class="modal-box" class:modal-{modal.size || 'md'}>
      {#if modal.closable !== false}
        <form method="dialog">
          <button
            class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
            aria-label="Close modal"
            on:click={() => handleClose(modal.id)}
          >
            ✕
          </button>
        </form>
      {/if}

      <div id="modal-title-{modal.id}">
        <Component {...modal.props} />
      </div>
    </div>

    <form method="dialog" class="modal-backdrop">
      <button>close</button>
    </form>
  </dialog>
{/each}

Create example modal components:

<!-- src/lib/modals/ConfirmModal.svelte -->
<script>
  export let title = 'Confirm Action';
  export let message = 'Are you sure you want to proceed?';
  export let confirmText = 'Confirm';
  export let cancelText = 'Cancel';
  export let variant = 'primary'; // primary, error, warning, success

  export let onconfirm: () => void;
  export let oncancel: () => void;

  function handleConfirm() {
    onconfirm?.();
  }

  function handleCancel() {
    oncancel?.();
  }
</script>

<div>
  <h3 class="font-bold text-lg mb-4">{title}</h3>
  <p class="py-4">{message}</p>
  <div class="modal-action">
    <button class="btn" on:click={handleCancel}>{cancelText}</button>
    <button class="btn btn-{variant}" on:click={handleConfirm}>
      {confirmText}
    </button>
  </div>
</div>

<!-- src/lib/modals/FormModal.svelte -->
<script>
  export let title = 'Form';
  export let submitText = 'Submit';

  export let onsubmit: (data: any) => void;

  let formData = {
    name: '',
    email: '',
  };

  function handleSubmit() {
    onsubmit?.(formData);
  }
</script>

<div>
  <h3 class="font-bold text-lg mb-4">{title}</h3>
  <form on:submit|preventDefault={handleSubmit} class="space-y-4">
    <div class="form-control">
      <label class="label">
        <span class="label-text">Name</span>
      </label>
      <input
        type="text"
        placeholder="Enter name"
        class="input input-bordered"
        bind:value={formData.name}
        required
      />
    </div>
    <div class="form-control">
      <label class="label">
        <span class="label-text">Email</span>
      </label>
      <input
        type="email"
        placeholder="Enter email"
        class="input input-bordered"
        bind:value={formData.email}
        required
      />
    </div>
    <div class="modal-action">
      <button type="submit" class="btn btn-primary">{submitText}</button>
    </div>
  </form>
</div>

Now create helper functions for convenient usage:

// src/lib/modalHelpers.ts
import { modalStore } from '$stores/modalStore';
import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
import FormModal from '$lib/modals/FormModal.svelte';

export function openModal(
  component: any,
  props: Record<string, any> = {},
  options: { size?: string; closable?: boolean } = {}
) {
  const id = `modal-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;

  modalStore.open({
    id,
    component,
    props,
    size: options.size || 'md',
    closable: options.closable !== false,
  });

  return id;
}

export function closeModal(id: string) {
  modalStore.close(id);
}

export function confirm(options: {
  title?: string;
  message?: string;
  confirmText?: string;
  cancelText?: string;
  variant?: string;
}): Promise<boolean> {
  return new Promise((resolve) => {
    const id = openModal(
      ConfirmModal,
      {
        ...options,
        onconfirm: () => {
          closeModal(id);
          resolve(true);
        },
        oncancel: () => {
          closeModal(id);
          resolve(false);
        },
      },
      { closable: false }
    );
  });
}

export function showForm(options: {
  title?: string;
  submitText?: string;
}): Promise<any> {
  return new Promise((resolve) => {
    const id = openModal(
      FormModal,
      {
        ...options,
        onsubmit: (data: any) => {
          closeModal(id);
          resolve(data);
        },
      },
      { closable: true }
    );
  });
}

Add ModalContainer to the root layout:

<!-- src/routes/+layout.svelte -->
<script>
  import '../app.css';
  import ModalContainer from '$lib/ModalContainer.svelte';
</script>

<slot />
<ModalContainer />

Example usage in a component:

<!-- src/routes/+page.svelte -->
<script>
  import { confirm, showForm, openModal } from '$lib/modalHelpers';
  import CustomModal from '$lib/modals/CustomModal.svelte';

  async function handleDelete() {
    const result = await confirm({
      title: 'Delete Item',
      message: 'This action cannot be undone.',
      confirmText: 'Delete',
      cancelText: 'Cancel',
      variant: 'error',
    });

    if (result) {
      console.log('Item deleted');
      // Perform deletion
    }
  }

  async function handleAddUser() {
    const data = await showForm({
      title: 'Add New User',
      submitText: 'Create User',
    });

    if (data) {
      console.log('User data:', data);
      // Send data to server
    }
  }

  function handleCustomModal() {
    openModal(CustomModal, {
      title: 'Custom Modal',
      content: 'This is a custom modal component',
    });
  }
</script>

<div class="p-8 space-y-4">
  <h1 class="text-3xl font-bold mb-6">Modal System Demo</h1>

  <div class="flex gap-4">
    <button class="btn btn-error" on:click={handleDelete}>
      Delete Item
    </button>
    <button class="btn btn-primary" on:click={handleAddUser}>
      Add User
    </button>
    <button class="btn btn-secondary" on:click={handleCustomModal}>
      Custom Modal
    </button>
  </div>
</div>

This example demonstrates a complete modal management system with:

Centralized state management through Svelte stores
Modal stack support (nested modals)
Automatic focus management
Promise-based API for confirm and form modals
Full accessibility (ARIA attributes, keyboard navigation)
Easy extension through custom components

Common Issues / Troubleshooting

Modal doesn't open
- Ensure Tailwind CSS is properly configured and daisyUI plugin is connected
- Check that modal and modal-box classes are applied correctly
- Make sure you're using the showModal() method for the <dialog> element
Focus is not trapped inside modal
- Ensure you're using the <dialog> element, not just a div with classes
- Check that the modal has the aria-modal="true" attribute
- Make sure there are no other elements with tabindex outside the modal
Nested modals don't work correctly
- Check that each modal has a unique ID
- Ensure only the last modal in the stack has the modal-open class
- Check the close logic — only the last modal should close on ESC
Styles are not applied
- Ensure daisyUI is properly configured in tailwind.config.js
- Check that the CSS file with Tailwind directives is imported
- Make sure the paths in the content array include all your components

Next Steps

Explore other daisyUI components: Explore dropdown, drawer, toast, and other components to extend functionality
Add animations: Use Svelte transitions for smooth open/close animations
Integrate with routing: Link modals to URL parameters for browser history support
Add testing: Write tests for the modal system using Testing Library
Optimize performance: Use lazy loading for modal components

Summary

In this article, we created an advanced modal management system using daisyUI and Svelte. The system includes centralized state management through Svelte stores, nested modal support, automatic focus management, and full accessibility. You can now use this system to create complex interfaces with modals in your Svelte applications.

Building Forms with Validation in carbon-components-svelte and Svelte

Ethan Walker — Fri, 09 Jan 2026 11:43:45 +0000

carbon-components-svelte is a Svelte component library that implements IBM's Carbon Design System, providing a collection of accessible and reusable UI components for building consistent interfaces. This article covers building complete forms with validation, error handling, and user feedback using carbon-components-svelte form components in Svelte. This is part 7 of a series on using carbon-components-svelte with Svelte.

This guide walks through creating a production-ready contact form with multiple input types, validation, error messages, and proper event handling using carbon-components-svelte components.

Prerequisites

Before starting, ensure you have:

A Svelte project (SvelteKit or standalone Svelte 3+)
Node.js 18+ and npm/pnpm/yarn
Basic understanding of Svelte reactivity and form handling
Familiarity with HTML form validation concepts

Installation

Install carbon-components-svelte using your preferred package manager:

npm install carbon-components-svelte
# or
pnpm add carbon-components-svelte
# or
yarn add carbon-components-svelte

The package includes all components and their styles.

Project Setup

After installation, you need to import Carbon styles into your application. In SvelteKit, add the import to your root layout or app.html:

<!-- src/app.html or src/routes/+layout.svelte -->
<style>
  @import 'carbon-components-svelte/css/white.css';
</style>

For standalone Svelte projects, import in your main file:

<!-- App.svelte -->
<style>
  @import 'carbon-components-svelte/css/white.css';
</style>

Carbon provides several themes: white.css (default), g10.css, g90.css, g100.css. Choose the theme that fits your design.

First Example / Basic Usage

Let's start with a simple form containing a text input with validation:

<!-- src/lib/ContactForm.svelte -->
<script>
  import { TextInput, Button, Form } from 'carbon-components-svelte';

  let email = '';
  let emailError = '';
  let isInvalid = false;

  function validateEmail(value) {
    if (!value) {
      return 'Email is required';
    }
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(value)) {
      return 'Please enter a valid email address';
    }
    return '';
  }

  function handleEmailBlur() {
    emailError = validateEmail(email);
    isInvalid = !!emailError;
  }

  function handleSubmit(event) {
    event.preventDefault();
    emailError = validateEmail(email);
    isInvalid = !!emailError;

    if (!emailError) {
      console.log('Form submitted:', { email });
      // Handle form submission
      email = '';
      emailError = '';
      isInvalid = false;
    }
  }
</script>

<Form on:submit={handleSubmit}>
  <TextInput
    id="email-input"
    type="email"
    labelText="Email Address"
    bind:value={email}
    invalid={isInvalid}
    invalidText={emailError}
    helperText="We'll never share your email with anyone else"
    placeholder="Enter your email"
    on:blur={handleEmailBlur}
  />

  <Button type="submit" kind="primary">
    Submit
  </Button>
</Form>

This example demonstrates:

TextInput component: TextInput from carbon-components-svelte with bind:value for two-way binding
Validation: validateEmail function checks for required field and email format
Error display: Using invalid and invalidText props to show validation errors
Helper text: Providing additional context with helperText
Accessibility: All ARIA attributes are handled automatically by Carbon components

Understanding the Basics

carbon-components-svelte components integrate seamlessly with Svelte's reactivity system. Key concepts:

Two-Way Binding

All form components support Svelte's bind:value directive:

<script>
  import { TextInput } from 'carbon-components-svelte';
  let username = '';
</script>

<TextInput
  id="username"
  labelText="Username"
  bind:value={username}
/>

Validation States

Components accept validation props:

invalid: Boolean to indicate invalid state
invalidText: Error message to display
helperText: Helper text shown when field is valid

Form Submission Handling

Handle form submission with standard Svelte event handlers:

<Form on:submit|preventDefault={handleSubmit}>
  <!-- form fields -->
</Form>

Reactive Statements

Use Svelte reactive statements for automatic validation:

<script>
  let password = '';
  let invalid = false;

  // Automatically updates when password changes
  $: invalid = !/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,}$/.test(password);
</script>

Practical Example / Building Something Real

Let's build a complete contact form with multiple field types, validation, and proper error handling:

<!-- src/lib/ContactForm.svelte -->
<script>
  import { 
    Form, 
    TextInput, 
    TextArea, 
    Button,
    FormGroup,
    RadioButtonGroup,
    RadioButton,
    Checkbox
  } from 'carbon-components-svelte';

  // Form state
  let formData = {
    name: '',
    email: '',
    phone: '',
    subject: '',
    message: '',
    contactMethod: '',
    newsletter: false
  };

  // Validation errors
  let errors = {
    name: '',
    email: '',
    phone: '',
    subject: '',
    message: '',
    contactMethod: ''
  };

  // Field validity state
  let invalidFields = {
    name: false,
    email: false,
    phone: false,
    subject: false,
    message: false,
    contactMethod: false
  };

  // Validation functions
  function validateName(value) {
    if (!value.trim()) {
      return 'Name is required';
    }
    if (value.trim().length < 2) {
      return 'Name must be at least 2 characters';
    }
    return '';
  }

  function validateEmail(value) {
    if (!value) {
      return 'Email is required';
    }
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(value)) {
      return 'Please enter a valid email address';
    }
    return '';
  }

  function validatePhone(value) {
    if (value && value.trim()) {
      const phoneRegex = /^[\d\s\-\(\)]+$/;
      if (!phoneRegex.test(value) || value.replace(/\D/g, '').length < 10) {
        return 'Please enter a valid phone number';
      }
    }
    return '';
  }

  function validateRequired(value, fieldName) {
    if (!value || !value.trim()) {
      return `${fieldName} is required`;
    }
    return '';
  }

  // Handle field blur events
  function handleNameBlur() {
    errors.name = validateName(formData.name);
    invalidFields.name = !!errors.name;
  }

  function handleEmailBlur() {
    errors.email = validateEmail(formData.email);
    invalidFields.email = !!errors.email;
  }

  function handlePhoneBlur() {
    errors.phone = validatePhone(formData.phone);
    invalidFields.phone = !!errors.phone;
  }

  function handleSubjectBlur() {
    errors.subject = validateRequired(formData.subject, 'Subject');
    invalidFields.subject = !!errors.subject;
  }

  function handleMessageBlur() {
    errors.message = validateRequired(formData.message, 'Message');
    invalidFields.message = !!errors.message;
  }

  // Validate entire form
  function validateForm() {
    errors.name = validateName(formData.name);
    errors.email = validateEmail(formData.email);
    errors.phone = validatePhone(formData.phone);
    errors.subject = validateRequired(formData.subject, 'Subject');
    errors.message = validateRequired(formData.message, 'Message');
    errors.contactMethod = validateRequired(formData.contactMethod, 'Preferred contact method');

    invalidFields.name = !!errors.name;
    invalidFields.email = !!errors.email;
    invalidFields.phone = !!errors.phone;
    invalidFields.subject = !!errors.subject;
    invalidFields.message = !!errors.message;
    invalidFields.contactMethod = !!errors.contactMethod;

    return !Object.values(errors).some(error => error !== '');
  }

  // Handle form submission
  function handleSubmit(event) {
    event.preventDefault();

    if (validateForm()) {
      console.log('Form submitted:', formData);
      // Here you would typically send data to your API
      alert('Form submitted successfully!');

      // Reset form
      formData = {
        name: '',
        email: '',
        phone: '',
        subject: '',
        message: '',
        contactMethod: '',
        newsletter: false
      };
      errors = {
        name: '',
        email: '',
        phone: '',
        subject: '',
        message: '',
        contactMethod: ''
      };
      invalidFields = {
        name: false,
        email: false,
        phone: false,
        subject: false,
        message: false,
        contactMethod: false
      };
    } else {
      console.log('Form has validation errors:', errors);
    }
  }
</script>

<div class="form-container">
  <h2>Contact Us</h2>

  <Form on:submit={handleSubmit}>
    <FormGroup legendText="Contact Information">
      <!-- Name field -->
      <TextInput
        id="name-input"
        type="text"
        labelText="Full Name"
        bind:value={formData.name}
        invalid={invalidFields.name}
        invalidText={errors.name}
        helperText="Enter your full name"
        placeholder="John Doe"
        required
        on:blur={handleNameBlur}
      />

      <!-- Email field -->
      <TextInput
        id="email-input"
        type="email"
        labelText="Email Address"
        bind:value={formData.email}
        invalid={invalidFields.email}
        invalidText={errors.email}
        helperText="We'll use this to respond to your inquiry"
        placeholder="john@example.com"
        required
        on:blur={handleEmailBlur}
      />

      <!-- Phone field (optional) -->
      <TextInput
        id="phone-input"
        type="tel"
        labelText="Phone Number (Optional)"
        bind:value={formData.phone}
        invalid={invalidFields.phone}
        invalidText={errors.phone}
        helperText="Include country code if outside US"
        placeholder="+1 (555) 123-4567"
        on:blur={handlePhoneBlur}
      />
    </FormGroup>

    <FormGroup legendText="Message">
      <!-- Subject field -->
      <TextInput
        id="subject-input"
        type="text"
        labelText="Subject"
        bind:value={formData.subject}
        invalid={invalidFields.subject}
        invalidText={errors.subject}
        placeholder="What is this regarding?"
        required
        on:blur={handleSubjectBlur}
      />

      <!-- Message field -->
      <TextArea
        id="message-input"
        labelText="Message"
        bind:value={formData.message}
        invalid={invalidFields.message}
        invalidText={errors.message}
        helperText="Please provide details about your inquiry"
        placeholder="Enter your message..."
        rows="5"
        required
        on:blur={handleMessageBlur}
      />
    </FormGroup>

    <FormGroup legendText="Additional">
      <!-- Preferred contact method (Radio) -->
      <RadioButtonGroup
        id="contact-method"
        labelText="Preferred Contact Method"
        bind:selected={formData.contactMethod}
        invalid={invalidFields.contactMethod}
        invalidText={errors.contactMethod}
      >
        <RadioButton labelText="Email" value="email" id="contact-email" />
        <RadioButton labelText="Phone" value="phone" id="contact-phone" />
        <RadioButton labelText="Either" value="either" id="contact-either" />
      </RadioButtonGroup>

      <!-- Newsletter checkbox -->
      <Checkbox
        id="newsletter"
        labelText="Subscribe to our newsletter for updates and tips"
        bind:checked={formData.newsletter}
      />
    </FormGroup>

    <!-- Submit button -->
    <Button type="submit" kind="primary" size="default">
      Send Message
    </Button>
  </Form>
</div>

<style>
  .form-container {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
  }

  h2 {
    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: 600;
  }
</style>

This complete form includes:

Multiple input types: Text fields, email, phone, and textarea
Real-time validation: Validates on blur and on submit
Error messages: Displays specific error messages for each field
Radio buttons: Using RadioButtonGroup for contact method selection
Checkbox: Newsletter subscription option
Accessibility: All fields are properly labeled and have ARIA attributes
Form reset: Clears form after successful submission

Common Issues / Troubleshooting

Validation errors not showing

Ensure the invalid prop is set to true when there's an error
Check that invalidText contains the error message string
Verify the validation function returns a non-empty string for errors

Two-way binding not working

Make sure you're using bind:value (not just value)
Check that the variable is declared with let (not const)
Verify the component supports binding (all carbon-components-svelte form components do)

CSS styles not applying

Ensure you've imported the CSS: @import 'carbon-components-svelte/css/white.css'
Check that the import is in the root layout or main file
Verify the import path matches your package manager's structure

Form submission not preventing default behavior

Add |preventDefault modifier: on:submit|preventDefault={handleSubmit}
Or call event.preventDefault() at the start of your handler function

Components not rendering correctly

Ensure you're using the correct component names (e.g., TextInput, not Input)
Check that all necessary components are imported from carbon-components-svelte
Verify the library version is compatible with your Svelte version

Next Steps

Now that you have a working form with validation, consider:

Server-side validation: Implement validation on your backend API
Async validation: Add email uniqueness checks or other async validations
Form state management: Use Svelte stores for complex multi-step forms
Custom validation rules: Create reusable validation utilities
Accessibility enhancements: Test with screen readers and keyboard navigation
Form libraries integration: Consider integrating with form libraries like Felte or Svelte Forms Lib

For more information, visit the carbon-components-svelte documentation and explore other components like Modal, Select, and DatePicker for more complex form scenarios.

Summary

You've learned how to build accessible, validated forms using carbon-components-svelte components in Svelte. The form includes multiple input types, real-time validation, error handling, and proper accessibility features. You can now create production-ready forms that work seamlessly with Svelte's reactivity system while maintaining full accessibility compliance.

Building Forms with Validation in Attractions and Svelte

Ethan Walker — Fri, 09 Jan 2026 11:42:02 +0000

Attractions is a modern and stylish UI kit for Svelte that provides beautiful, accessible components for building web applications. It offers a comprehensive set of form components with built-in styling and customization options. This article covers building complete forms with validation, error handling, and user feedback using Attractions form components in Svelte. This is part 10 of a series on using Attractions with Svelte.

This guide walks through creating a production-ready contact form with multiple input types, validation, error messages, and proper user experience using Attractions components.

Prerequisites

Before starting, ensure you have:

A Svelte project (SvelteKit or standalone Svelte 3+)
Node.js 14+ and npm/pnpm/yarn
Basic understanding of Svelte reactivity and form handling
Familiarity with JavaScript validation concepts

Installation

Install Attractions and its required dependencies using your preferred package manager:

npm install --save-dev attractions svelte-preprocess sass postcss autoprefixer
# or
pnpm add -D attractions svelte-preprocess sass postcss autoprefixer
# or
yarn add -D attractions svelte-preprocess sass postcss autoprefixer

The svelte-preprocess package is required for processing SCSS files, and sass is needed for compiling Attractions' styles.

Project Setup

1. Configure Svelte Preprocessor

Update your svelte.config.js to include the Attractions importer:

// svelte.config.js
import sveltePreprocess from 'svelte-preprocess';
import makeAttractionsImporter from 'attractions/importer.js';

const config = {
  preprocess: sveltePreprocess({
    scss: {
      importer: makeAttractionsImporter(),
      includePaths: ['src'],
    },
    postcss: true,
  }),
  // ... other config
};

export default config;

2. Import Attractions Styles

Create a global styles file or import in your main layout:

<!-- src/app.html or src/routes/+layout.svelte -->
<script>
  import 'attractions/styles.css';
</script>

For standalone Svelte projects, import in your main entry file:

// main.js
import 'attractions/styles.css';
import App from './App.svelte';

const app = new App({
  target: document.body
});

3. Optional: Customize Theme

Create a theme file to customize Attractions' default colors:

// src/_attractions-theme.scss
@use 'attractions/_variables' with (
  $primary: #ff3e00,
  $secondary: #1e90ff,
  $error: #ff4444
);

Then update your svelte.config.js to use the theme:

// svelte.config.js
import sveltePreprocess from 'svelte-preprocess';
import makeAttractionsImporter from 'attractions/importer.js';

const config = {
  preprocess: sveltePreprocess({
    scss: {
      importer: makeAttractionsImporter({
        themeFile: 'src/_attractions-theme.scss',
      }),
      includePaths: ['src'],
    },
    postcss: true,
  }),
};

export default config;

First Example / Basic Usage

Let's start with a simple form containing a text input with basic validation:

<!-- src/lib/SimpleForm.svelte -->
<script>
  import { Input, Button } from 'attractions';

  let email = '';
  let emailError = '';

  function validateEmail(value) {
    if (!value) {
      return 'Email is required';
    }
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(value)) {
      return 'Please enter a valid email address';
    }
    return '';
  }

  function handleEmailBlur() {
    emailError = validateEmail(email);
  }

  function handleSubmit(event) {
    event.preventDefault();
    emailError = validateEmail(email);

    if (!emailError) {
      console.log('Form submitted:', { email });
      // Reset form
      email = '';
      emailError = '';
    }
  }
</script>

<form on:submit={handleSubmit} class="form-container">
  <Input
    label="Email Address"
    type="email"
    bind:value={email}
    error={emailError}
    on:blur={handleEmailBlur}
    placeholder="Enter your email"
  />

  <Button type="submit" variant="filled">
    Submit
  </Button>
</form>

<style>
  .form-container {
    max-width: 400px;
    margin: 2rem auto;
    padding: 1.5rem;
  }
</style>

This example demonstrates:

Input component: Attractions' Input with bind:value for two-way binding
Validation: Custom validateEmail function that checks for required field and email format
Error display: Using error prop to show validation errors
Event handling: on:blur event to validate when user leaves the field
Form submission: Preventing default behavior and validating before submission

Understanding the Basics

Attractions components integrate seamlessly with Svelte's reactivity system. Key concepts:

Two-Way Binding

All form components support Svelte's bind:value directive:

<script>
  import { Input } from 'attractions';
  let username = '';
</script>

<Input
  label="Username"
  bind:value={username}
/>

Validation Pattern

The typical validation pattern in Svelte with Attractions:

<script>
  import { Input } from 'attractions';

  let value = '';
  let error = '';

  function validate(value) {
    if (!value) return 'This field is required';
    // Add more validation rules
    return '';
  }

  function handleBlur() {
    error = validate(value);
  }
</script>

<Input
  label="Field Label"
  bind:value={value}
  error={error}
  on:blur={handleBlur}
/>

Multiple Input Types

Attractions supports various input types:

<script>
  import { Input } from 'attractions';

  let text = '';
  let email = '';
  let password = '';
  let number = '';
</script>

<Input label="Text" type="text" bind:value={text} />
<Input label="Email" type="email" bind:value={email} />
<Input label="Password" type="password" bind:value={password} />
<Input label="Number" type="number" bind:value={number} />

Practical Example / Building Something Real

Let's build a complete contact form with multiple fields, validation, and proper error handling:

<!-- src/lib/ContactForm.svelte -->
<script>
  import { Input, Button, Textarea } from 'attractions';

  // Form data
  let formData = {
    name: '',
    email: '',
    phone: '',
    subject: '',
    message: ''
  };

  // Error states
  let errors = {
    name: '',
    email: '',
    phone: '',
    subject: '',
    message: ''
  };

  // Form state
  let isSubmitting = false;
  let submitSuccess = false;

  // Validation functions
  function validateName(value) {
    if (!value.trim()) {
      return 'Name is required';
    }
    if (value.trim().length < 2) {
      return 'Name must be at least 2 characters';
    }
    return '';
  }

  function validateEmail(value) {
    if (!value) {
      return 'Email is required';
    }
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(value)) {
      return 'Please enter a valid email address';
    }
    return '';
  }

  function validatePhone(value) {
    if (!value) {
      return 'Phone is required';
    }
    const phoneRegex = /^[\d\s\-\+\(\)]+$/;
    if (!phoneRegex.test(value)) {
      return 'Please enter a valid phone number';
    }
    return '';
  }

  function validateSubject(value) {
    if (!value.trim()) {
      return 'Subject is required';
    }
    if (value.trim().length < 5) {
      return 'Subject must be at least 5 characters';
    }
    return '';
  }

  function validateMessage(value) {
    if (!value.trim()) {
      return 'Message is required';
    }
    if (value.trim().length < 10) {
      return 'Message must be at least 10 characters';
    }
    return '';
  }

  // Handle field blur events
  function handleNameBlur() {
    errors.name = validateName(formData.name);
  }

  function handleEmailBlur() {
    errors.email = validateEmail(formData.email);
  }

  function handlePhoneBlur() {
    errors.phone = validatePhone(formData.phone);
  }

  function handleSubjectBlur() {
    errors.subject = validateSubject(formData.subject);
  }

  function handleMessageBlur() {
    errors.message = validateMessage(formData.message);
  }

  // Validate all fields
  function validateAll() {
    errors.name = validateName(formData.name);
    errors.email = validateEmail(formData.email);
    errors.phone = validatePhone(formData.phone);
    errors.subject = validateSubject(formData.subject);
    errors.message = validateMessage(formData.message);

    // Check if form is valid
    return !Object.values(errors).some(error => error !== '');
  }

  // Handle form submission
  async function handleSubmit(event) {
    event.preventDefault();

    if (!validateAll()) {
      return;
    }

    isSubmitting = true;
    submitSuccess = false;

    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1500));

      console.log('Form submitted:', formData);

      // Reset form
      formData = {
        name: '',
        email: '',
        phone: '',
        subject: '',
        message: ''
      };

      errors = {
        name: '',
        email: '',
        phone: '',
        subject: '',
        message: ''
      };

      submitSuccess = true;

      // Hide success message after 3 seconds
      setTimeout(() => {
        submitSuccess = false;
      }, 3000);
    } catch (error) {
      console.error('Submission error:', error);
    } finally {
      isSubmitting = false;
    }
  }
</script>

<div class="contact-form-container">
  <h2>Contact Us</h2>

  {#if submitSuccess}
    <div class="success-message">
      Thank you! Your message has been sent successfully.
    </div>
  {/if}

  <form on:submit={handleSubmit} class="contact-form">
    <Input
      label="Full Name"
      type="text"
      bind:value={formData.name}
      error={errors.name}
      on:blur={handleNameBlur}
      placeholder="John Doe"
      required
    />

    <Input
      label="Email Address"
      type="email"
      bind:value={formData.email}
      error={errors.email}
      on:blur={handleEmailBlur}
      placeholder="john@example.com"
      required
    />

    <Input
      label="Phone Number"
      type="tel"
      bind:value={formData.phone}
      error={errors.phone}
      on:blur={handlePhoneBlur}
      placeholder="+1 (555) 123-4567"
      required
    />

    <Input
      label="Subject"
      type="text"
      bind:value={formData.subject}
      error={errors.subject}
      on:blur={handleSubjectBlur}
      placeholder="What is this regarding?"
      required
    />

    <Textarea
      label="Message"
      bind:value={formData.message}
      error={errors.message}
      on:blur={handleMessageBlur}
      placeholder="Enter your message here..."
      rows="6"
      required
    />

    <div class="form-actions">
      <Button
        type="submit"
        variant="filled"
        disabled={isSubmitting}
      >
        {isSubmitting ? 'Sending...' : 'Send Message'}
      </Button>
    </div>
  </form>
</div>

<style>
  .contact-form-container {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
  }

  h2 {
    margin-bottom: 1.5rem;
    color: #333;
  }

  .success-message {
    background-color: #4caf50;
    color: white;
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    text-align: center;
  }

  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .form-actions {
    margin-top: 0.5rem;
  }
</style>

This complete example includes:

Multiple input types: Text, email, tel inputs and textarea
Comprehensive validation: Each field has specific validation rules
Error handling: Errors are displayed per field
Loading state: Button shows "Sending..." during submission
Success feedback: Success message appears after submission
Form reset: Form clears after successful submission
Accessibility: All fields are properly labeled and required fields are marked

Common Issues / Troubleshooting

1. Styles Not Loading

Problem: Attractions components appear unstyled.

Solution: Ensure you've imported the styles correctly:

<script>
  import 'attractions/styles.css';
</script>

Also verify that svelte-preprocess is configured in svelte.config.js.

2. SCSS Compilation Errors

Problem: Errors when compiling SCSS files.

Solution: Make sure sass is installed:

npm install -D sass

And verify the importer is set up correctly in svelte.config.js.

3. Validation Not Triggering

Problem: Validation doesn't run when expected.

Solution: Ensure you're handling the blur event:

<Input
  bind:value={value}
  error={error}
  on:blur={handleBlur}
/>

Also validate on form submit to catch all errors.

4. Two-Way Binding Not Working

Problem: Input values don't update the bound variable.

Solution: Use bind:value instead of value:

<!-- Correct -->
<Input bind:value={myValue} />

<!-- Incorrect -->
<Input value={myValue} />

Next Steps

Explore More Components: Check out other Attractions components like Select, Checkbox, Radio, and Switch for more complex forms
Customize Themes: Learn how to customize colors, spacing, and other design tokens using Sass variables
Build Complex Forms: Combine multiple form components to create multi-step forms or dynamic form fields
Accessibility: Review Attractions' accessibility features and ensure your forms meet WCAG guidelines
Form Libraries: Consider integrating with form libraries like svelte-forms-lib for more advanced validation patterns

For more information, visit the Attractions documentation.

Summary

In this guide, we've covered creating forms with validation using Attractions in Svelte. You should now be able to build complete, production-ready forms with proper validation, error handling, and user feedback. The examples demonstrate how to integrate Attractions components with Svelte's reactivity system to create responsive and accessible forms.

Building Interactive Data Tables with AgnosUI in Svelte

Ethan Walker — Fri, 09 Jan 2026 11:40:52 +0000

AgnosUI is a framework-agnostic component library that provides accessible, production-ready UI primitives for React, Vue, Angular, and Svelte. It offers headless components that give you full control over styling while handling accessibility and complex interactions automatically. This article covers building interactive data tables with sorting, filtering, and pagination using AgnosUI's table components in Svelte. This is part 16 of a series on using AgnosUI with Svelte.

This guide walks through creating a production-ready data table with sorting, filtering, pagination, and proper accessibility features using AgnosUI components.

Prerequisites

Before starting, ensure you have:

A Svelte project (SvelteKit or standalone Svelte 4+)
Node.js 18+ and npm/pnpm/yarn
Basic understanding of Svelte reactivity and component composition
Familiarity with JavaScript array methods (map, filter, sort)

Installation

Install AgnosUI for Svelte using your preferred package manager:

npm install @agnos-ui/svelte-headless
# or
pnpm add @agnos-ui/svelte-headless
# or
yarn add @agnos-ui/svelte-headless

The package includes all components and their logic. You'll need to import CSS separately if you want default styling.

Project Setup

After installation, you can optionally import AgnosUI's CSS for default styling. In SvelteKit, add it to your root layout:

<!-- src/routes/+layout.svelte -->
<script>
  import '@agnos-ui/svelte-headless/css/common.min.css';
</script>

For standalone Svelte projects, import it in your main entry file:

// main.js
import '@agnos-ui/svelte-headless/css/common.min.css';
import App from './App.svelte';

const app = new App({
  target: document.body
});

First Example / Basic Usage

Let's start with a simple table displaying data:

<!-- src/lib/SimpleTable.svelte -->
<script>
  import { createTable } from '@agnos-ui/svelte-headless';

  // Sample data
  const users = [
    { id: 1, name: 'Alice Johnson', email: 'alice@example.com', role: 'Admin', status: 'Active' },
    { id: 2, name: 'Bob Smith', email: 'bob@example.com', role: 'User', status: 'Active' },
    { id: 3, name: 'Charlie Brown', email: 'charlie@example.com', role: 'User', status: 'Inactive' },
    { id: 4, name: 'Diana Prince', email: 'diana@example.com', role: 'Moderator', status: 'Active' },
    { id: 5, name: 'Eve Wilson', email: 'eve@example.com', role: 'User', status: 'Active' }
  ];

  // Create table instance
  const table = createTable({
    data: users,
    columns: [
      { id: 'name', header: 'Name', accessor: (row) => row.name },
      { id: 'email', header: 'Email', accessor: (row) => row.email },
      { id: 'role', header: 'Role', accessor: (row) => row.role },
      { id: 'status', header: 'Status', accessor: (row) => row.status }
    ]
  });
</script>

<div class="table-container">
  <table class="table">
    <thead>
      <tr>
        {#each $table.columns as column}
          <th>{column.header}</th>
        {/each}
      </tr>
    </thead>
    <tbody>
      {#each $table.rows as row}
        <tr>
          {#each $table.columns as column}
            <td>{column.accessor(row)}</td>
          {/each}
        </tr>
      {/each}
    </tbody>
  </table>
</div>

<style>
  .table-container {
    width: 100%;
    overflow-x: auto;
  }

  .table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
  }

  .table th,
  .table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
  }

  .table th {
    background-color: #f9fafb;
    font-weight: 600;
    color: #374151;
  }

  .table tbody tr:hover {
    background-color: #f9fafb;
  }
</style>

This example demonstrates:

createTable function: AgnosUI's table builder that manages table state
Columns configuration: Define table structure with headers and data accessors
Reactive stores: Using $table.columns and $table.rows to access table data reactively
Basic styling: Simple table styles for readability

Understanding the Basics

AgnosUI's table system provides a headless approach, giving you full control over markup while handling complex state management. Key concepts:

Table State Management

The createTable function returns a store with reactive properties:

columns: Array of column definitions
rows: Array of processed row data
sorting: Current sorting state
filtering: Current filtering state
pagination: Pagination state

Column Accessors

Each column uses an accessor function to extract data from rows:

<script>
  const column = {
    id: 'name',
    header: 'Name',
    accessor: (row) => row.name  // Extracts name from each row
  };
</script>

Reactive Updates

All table state is reactive, so changes automatically update the UI:

<script>
  let table = createTable({ data: users, columns: [...] });

  // Adding new data automatically updates the table
  function addUser(newUser) {
    users = [...users, newUser];
    table.update({ data: users });
  }
</script>

Practical Example / Building Something Real

Let's build a complete data table with sorting, filtering, and pagination:

<!-- src/lib/DataTable.svelte -->
<script>
  import { createTable } from '@agnos-ui/svelte-headless';
  import { writable } from 'svelte/store';

  // Sample data - in real app, this would come from an API
  const initialUsers = [
    { id: 1, name: 'Alice Johnson', email: 'alice@example.com', role: 'Admin', status: 'Active', joinDate: '2023-01-15' },
    { id: 2, name: 'Bob Smith', email: 'bob@example.com', role: 'User', status: 'Active', joinDate: '2023-02-20' },
    { id: 3, name: 'Charlie Brown', email: 'charlie@example.com', role: 'User', status: 'Inactive', joinDate: '2023-03-10' },
    { id: 4, name: 'Diana Prince', email: 'diana@example.com', role: 'Moderator', status: 'Active', joinDate: '2023-01-05' },
    { id: 5, name: 'Eve Wilson', email: 'eve@example.com', role: 'User', status: 'Active', joinDate: '2023-04-12' },
    { id: 6, name: 'Frank Miller', email: 'frank@example.com', role: 'User', status: 'Inactive', joinDate: '2023-05-18' },
    { id: 7, name: 'Grace Lee', email: 'grace@example.com', role: 'Admin', status: 'Active', joinDate: '2023-02-28' },
    { id: 8, name: 'Henry Davis', email: 'henry@example.com', role: 'Moderator', status: 'Active', joinDate: '2023-03-22' },
    { id: 9, name: 'Ivy Chen', email: 'ivy@example.com', role: 'User', status: 'Active', joinDate: '2023-06-01' },
    { id: 10, name: 'Jack Taylor', email: 'jack@example.com', role: 'User', status: 'Inactive', joinDate: '2023-04-30' }
  ];

  // Filter state
  let searchQuery = '';
  let statusFilter = 'all';
  let roleFilter = 'all';

  // Pagination state
  const pageSize = 5;
  let currentPage = writable(1);

  // Computed filtered and sorted data
  $: filteredUsers = initialUsers.filter(user => {
    const matchesSearch = !searchQuery || 
      user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.email.toLowerCase().includes(searchQuery.toLowerCase());

    const matchesStatus = statusFilter === 'all' || user.status === statusFilter;
    const matchesRole = roleFilter === 'all' || user.role === roleFilter;

    return matchesSearch && matchesStatus && matchesRole;
  });

  // Sorting state
  let sortColumn = '';
  let sortDirection = 'asc';

  $: sortedUsers = [...filteredUsers].sort((a, b) => {
    if (!sortColumn) return 0;

    const aValue = a[sortColumn];
    const bValue = b[sortColumn];

    if (typeof aValue === 'string') {
      return sortDirection === 'asc' 
        ? aValue.localeCompare(bValue)
        : bValue.localeCompare(aValue);
    }

    return sortDirection === 'asc' ? aValue - bValue : bValue - aValue;
  });

  // Pagination calculations
  $: totalPages = Math.ceil(sortedUsers.length / pageSize);
  $: startIndex = ($currentPage - 1) * pageSize;
  $: endIndex = startIndex + pageSize;
  $: paginatedUsers = sortedUsers.slice(startIndex, endIndex);

  // Table configuration
  const table = createTable({
    data: paginatedUsers,
    columns: [
      { 
        id: 'name', 
        header: 'Name', 
        accessor: (row) => row.name,
        sortable: true
      },
      { 
        id: 'email', 
        header: 'Email', 
        accessor: (row) => row.email,
        sortable: true
      },
      { 
        id: 'role', 
        header: 'Role', 
        accessor: (row) => row.role,
        sortable: true
      },
      { 
        id: 'status', 
        header: 'Status', 
        accessor: (row) => row.status,
        sortable: true
      },
      { 
        id: 'joinDate', 
        header: 'Join Date', 
        accessor: (row) => new Date(row.joinDate).toLocaleDateString(),
        sortable: true
      }
    ]
  });

  // Sorting handler
  function handleSort(columnId) {
    if (sortColumn === columnId) {
      sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
    } else {
      sortColumn = columnId;
      sortDirection = 'asc';
    }
    $currentPage = 1; // Reset to first page when sorting
  }

  // Get sort indicator
  function getSortIndicator(columnId) {
    if (sortColumn !== columnId) return '↕️';
    return sortDirection === 'asc' ? '↑' : '↓';
  }

  // Pagination handlers
  function goToPage(page) {
    if (page >= 1 && page <= totalPages) {
      currentPage.set(page);
    }
  }

  function previousPage() {
    if ($currentPage > 1) {
      currentPage.update(n => n - 1);
    }
  }

  function nextPage() {
    if ($currentPage < totalPages) {
      currentPage.update(n => n + 1);
    }
  }

  // Reset filters
  function resetFilters() {
    searchQuery = '';
    statusFilter = 'all';
    roleFilter = 'all';
    $currentPage = 1;
  }
</script>

<div class="data-table-container">
  <div class="table-header">
    <h2 class="table-title">User Management</h2>
    <div class="table-actions">
      <button class="btn btn-secondary" on:click={resetFilters}>
        Reset Filters
      </button>
    </div>
  </div>

  <!-- Filters -->
  <div class="filters">
    <div class="filter-group">
      <label for="search">Search:</label>
      <input
        id="search"
        type="text"
        placeholder="Search by name or email..."
        bind:value={searchQuery}
        class="filter-input"
      />
    </div>

    <div class="filter-group">
      <label for="status">Status:</label>
      <select id="status" bind:value={statusFilter} class="filter-select">
        <option value="all">All</option>
        <option value="Active">Active</option>
        <option value="Inactive">Inactive</option>
      </select>
    </div>

    <div class="filter-group">
      <label for="role">Role:</label>
      <select id="role" bind:value={roleFilter} class="filter-select">
        <option value="all">All</option>
        <option value="Admin">Admin</option>
        <option value="Moderator">Moderator</option>
        <option value="User">User</option>
      </select>
    </div>
  </div>

  <!-- Table -->
  <div class="table-wrapper">
    <table class="data-table" role="table">
      <thead>
        <tr>
          {#each $table.columns as column}
            <th
              role="columnheader"
              class={column.sortable ? 'sortable' : ''}
              on:click={column.sortable ? () => handleSort(column.id) : undefined}
              tabindex={column.sortable ? 0 : undefined}
              on:keydown={(e) => column.sortable && e.key === 'Enter' && handleSort(column.id)}
            >
              <span class="header-content">
                {column.header}
                {#if column.sortable}
                  <span class="sort-indicator">{getSortIndicator(column.id)}</span>
                {/if}
              </span>
            </th>
          {/each}
        </tr>
      </thead>
      <tbody>
        {#if paginatedUsers.length === 0}
          <tr>
            <td colspan={$table.columns.length} class="empty-state">
              No users found matching your criteria.
            </td>
          </tr>
        {:else}
          {#each paginatedUsers as user (user.id)}
            <tr>
              <td>{user.name}</td>
              <td>{user.email}</td>
              <td>
                <span class="badge badge-{user.role.toLowerCase()}">{user.role}</span>
              </td>
              <td>
                <span class="status status-{user.status.toLowerCase()}">{user.status}</span>
              </td>
              <td>{new Date(user.joinDate).toLocaleDateString()}</td>
            </tr>
          {/each}
        {/if}
      </tbody>
    </table>
  </div>

  <!-- Pagination -->
  {#if totalPages > 1}
    <div class="pagination">
      <div class="pagination-info">
        Showing {startIndex + 1} to {Math.min(endIndex, sortedUsers.length)} of {sortedUsers.length} users
      </div>
      <div class="pagination-controls">
        <button
          class="btn btn-pagination"
          on:click={previousPage}
          disabled={$currentPage === 1}
          aria-label="Previous page"
        >
          Previous
        </button>

        {#each Array(totalPages) as _, i}
          {@const page = i + 1}
          {#if page === 1 || page === totalPages || (page >= $currentPage - 1 && page <= $currentPage + 1)}
            <button
              class="btn btn-pagination"
              class:active={$currentPage === page}
              on:click={() => goToPage(page)}
              aria-label="Page {page}"
              aria-current={$currentPage === page ? 'page' : undefined}
            >
              {page}
            </button>
          {:else if page === $currentPage - 2 || page === $currentPage + 2}
            <span class="pagination-ellipsis">...</span>
          {/if}
        {/each}

        <button
          class="btn btn-pagination"
          on:click={nextPage}
          disabled={$currentPage === totalPages}
          aria-label="Next page"
        >
          Next
        </button>
      </div>
    </div>
  {/if}
</div>

<style>
  .data-table-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
    font-family: system-ui, -apple-system, sans-serif;
  }

  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }

  .table-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
  }

  .filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
  }

  .filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 150px;
  }

  .filter-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
  }

  .filter-input,
  .filter-select {
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
  }

  .filter-input:focus,
  .filter-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }

  .table-wrapper {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
  }

  .data-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
  }

  .data-table thead {
    background-color: #f9fafb;
  }

  .data-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
  }

  .data-table th.sortable {
    cursor: pointer;
    user-select: none;
  }

  .data-table th.sortable:hover {
    background-color: #f3f4f6;
  }

  .data-table th.sortable:focus {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
  }

  .header-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .sort-indicator {
    font-size: 0.75rem;
    color: #6b7280;
  }

  .data-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.875rem;
    color: #111827;
  }

  .data-table tbody tr:hover {
    background-color: #f9fafb;
  }

  .data-table tbody tr:last-child td {
    border-bottom: none;
  }

  .empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
  }

  .badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
  }

  .badge-admin {
    background-color: #fef3c7;
    color: #92400e;
  }

  .badge-moderator {
    background-color: #dbeafe;
    color: #1e40af;
  }

  .badge-user {
    background-color: #e5e7eb;
    color: #374151;
  }

  .status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
  }

  .status-active {
    background-color: #d1fae5;
    color: #065f46;
  }

  .status-inactive {
    background-color: #fee2e2;
    color: #991b1b;
  }

  .pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
  }

  .pagination-info {
    font-size: 0.875rem;
    color: #6b7280;
  }

  .pagination-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  .btn {
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background: white;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn:hover:not(:disabled) {
    background-color: #f9fafb;
    border-color: #9ca3af;
  }

  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .btn-secondary {
    background-color: #f3f4f6;
    color: #374151;
  }

  .btn-pagination {
    min-width: 2.5rem;
    padding: 0.5rem 0.75rem;
  }

  .btn-pagination.active {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
  }

  .btn-pagination.active:hover {
    background-color: #2563eb;
  }

  .pagination-ellipsis {
    padding: 0 0.5rem;
    color: #6b7280;
  }

  @media (max-width: 768px) {
    .filters {
      flex-direction: column;
    }

    .filter-group {
      min-width: 100%;
    }

    .pagination {
      flex-direction: column;
      gap: 1rem;
    }
  }
</style>

This complete data table includes:

Search functionality: Filter by name or email
Multi-filter support: Filter by status and role
Column sorting: Click headers to sort ascending/descending
Pagination: Navigate through pages of results
Responsive design: Works on mobile and desktop
Accessibility: Proper ARIA labels and keyboard navigation
Empty states: Shows message when no data matches filters
Visual indicators: Badges for roles and status

Common Issues / Troubleshooting

Table not updating when data changes

Ensure you're using reactive statements ($:) for computed values
Update the table instance when data changes: table.update({ data: newData })
Check that your data array is being reassigned, not mutated

Sorting not working correctly

Verify that sortColumn matches the column id exactly
Check that your accessor function returns comparable values
Ensure you're creating a new array when sorting: [...filteredUsers].sort()

Pagination showing wrong page

Make sure to reset currentPage to 1 when filters change
Verify that startIndex and endIndex calculations are correct
Check that totalPages is calculated before pagination

Performance issues with large datasets

Consider implementing virtual scrolling for very large datasets
Use keyed each blocks: {#each items as item (item.id)}
Debounce search input to avoid filtering on every keystroke

Next Steps

Now that you have a working data table, consider:

Server-side pagination: Load data from API in chunks instead of all at once
Advanced filtering: Add date range filters, multi-select filters, or custom filter components
Column customization: Allow users to show/hide columns or reorder them
Export functionality: Add CSV/Excel export for table data
Row selection: Implement checkboxes for bulk actions
Inline editing: Allow editing cells directly in the table
Virtual scrolling: For tables with thousands of rows

For more information, visit the AgnosUI documentation and explore other components like Select, DatePicker, and Dialog for enhanced table interactions.

Summary

You've learned how to build an interactive data table using AgnosUI components in Svelte. The table includes sorting, filtering, pagination, and proper accessibility features. You can now create production-ready data tables that work seamlessly with Svelte's reactivity system while maintaining full control over styling and behavior.

Building Accessible Forms with Validation in AgnosticUI and Svelte

Ethan Walker — Fri, 09 Jan 2026 11:38:56 +0000

AgnosticUI is a framework-agnostic component library that provides accessible, production-ready UI primitives for React, Vue, Angular, and Svelte. It follows WAI-ARIA guidelines and ensures your forms are accessible out of the box. This article covers building complete forms with validation, error handling, and proper accessibility using AgnosticUI's form components in Svelte. This is part 20 of a series on using AgnosticUI with Svelte.

This guide walks through creating a production-ready contact form with multiple input types, validation, error messages, and proper accessibility features using AgnosticUI components.

Prerequisites

Before starting, ensure you have:

A Svelte project (SvelteKit or standalone Svelte 4+)
Node.js 18+ and npm/pnpm/yarn
Basic understanding of Svelte reactivity and form handling
Familiarity with HTML form validation concepts

Installation

Install AgnosticUI for Svelte using your preferred package manager:

npm install agnostic-svelte
# or
pnpm add agnostic-svelte
# or
yarn add agnostic-svelte

The package includes all components and their CSS styles.

Project Setup

After installation, you need to import AgnosticUI's CSS in your application. In SvelteKit, add it to your root layout or app.html:

<!-- src/app.html or src/routes/+layout.svelte -->
<script>
  import 'agnostic-svelte/css/common.min.css';
</script>

For standalone Svelte projects, import it in your main entry file:

// main.js
import 'agnostic-svelte/css/common.min.css';
import App from './App.svelte';

const app = new App({
  target: document.body
});

First Example / Basic Usage

Let's start with a simple form containing a text input with validation:

<!-- src/lib/ContactForm.svelte -->
<script>
  import { Input, Button } from 'agnostic-svelte';
  import 'agnostic-svelte/css/common.min.css';

  let email = '';
  let emailError = '';

  function validateEmail(value) {
    if (!value) {
      return 'Email is required';
    }
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(value)) {
      return 'Please enter a valid email address';
    }
    return '';
  }

  function handleEmailBlur() {
    emailError = validateEmail(email);
  }

  function handleSubmit(event) {
    event.preventDefault();
    emailError = validateEmail(email);

    if (!emailError) {
      console.log('Form submitted:', { email });
      // Handle form submission
    }
  }
</script>

<form on:submit={handleSubmit}>
  <Input
    uniqueId="email-input"
    type="email"
    label="Email Address"
    bind:value={email}
    isInvalid={!!emailError}
    invalidText={emailError}
    helpText="We'll never share your email with anyone else."
    on:blur={handleEmailBlur}
  />

  <Button
    type="submit"
    mode="primary"
    isRounded
    isBlock
    class="mts16"
  >
    Submit
  </Button>
</form>

This example demonstrates:

Input component: AgnosticUI's Input with bind:value for two-way binding
Validation: Custom validateEmail function that checks for required field and email format
Error display: Using isInvalid and invalidText props to show validation errors
Help text: Providing additional context with helpText
Accessibility: All ARIA attributes are handled automatically by AgnosticUI

Understanding the Basics

AgnosticUI components integrate seamlessly with Svelte's reactivity system. Key concepts:

Two-Way Binding

All form components support Svelte's bind:value directive:

<script>
  import { Input } from 'agnostic-svelte';
  let username = '';
</script>

<Input
  uniqueId="username"
  label="Username"
  bind:value={username}
/>

Validation States

Components accept validation props:

isInvalid: Boolean to indicate invalid state
invalidText: Error message to display
helpText: Helper text shown when field is valid

Form Submission

Handle form submission with standard Svelte event handlers:

<form on:submit|preventDefault={handleSubmit}>
  <!-- form fields -->
</form>

Practical Example / Building Something Real

Let's build a complete contact form with multiple field types, validation, and proper error handling:

<!-- src/lib/ContactForm.svelte -->
<script>
  import { Input, Button, ChoiceInput, ChoiceInputOption } from 'agnostic-svelte';
  import 'agnostic-svelte/css/common.min.css';

  // Form state
  let formData = {
    name: '',
    email: '',
    phone: '',
    subject: '',
    message: '',
    contactMethod: '',
    newsletter: false
  };

  // Validation errors
  let errors = {
    name: '',
    email: '',
    phone: '',
    subject: '',
    message: '',
    contactMethod: ''
  };

  // Validation functions
  function validateName(value) {
    if (!value.trim()) {
      return 'Name is required';
    }
    if (value.trim().length < 2) {
      return 'Name must be at least 2 characters';
    }
    return '';
  }

  function validateEmail(value) {
    if (!value) {
      return 'Email is required';
    }
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(value)) {
      return 'Please enter a valid email address';
    }
    return '';
  }

  function validatePhone(value) {
    if (value && value.trim()) {
      const phoneRegex = /^[\d\s\-\(\)]+$/;
      if (!phoneRegex.test(value) || value.replace(/\D/g, '').length < 10) {
        return 'Please enter a valid phone number';
      }
    }
    return '';
  }

  function validateRequired(value, fieldName) {
    if (!value || !value.trim()) {
      return `${fieldName} is required`;
    }
    return '';
  }

  // Handle field blur events
  function handleNameBlur() {
    errors.name = validateName(formData.name);
  }

  function handleEmailBlur() {
    errors.email = validateEmail(formData.email);
  }

  function handlePhoneBlur() {
    errors.phone = validatePhone(formData.phone);
  }

  function handleSubjectBlur() {
    errors.subject = validateRequired(formData.subject, 'Subject');
  }

  function handleMessageBlur() {
    errors.message = validateRequired(formData.message, 'Message');
  }

  // Validate entire form
  function validateForm() {
    errors.name = validateName(formData.name);
    errors.email = validateEmail(formData.email);
    errors.phone = validatePhone(formData.phone);
    errors.subject = validateRequired(formData.subject, 'Subject');
    errors.message = validateRequired(formData.message, 'Message');
    errors.contactMethod = validateRequired(formData.contactMethod, 'Preferred contact method');

    return !Object.values(errors).some(error => error !== '');
  }

  // Handle form submission
  function handleSubmit(event) {
    event.preventDefault();

    if (validateForm()) {
      console.log('Form submitted:', formData);
      // Here you would typically send data to your API
      alert('Form submitted successfully!');

      // Reset form
      formData = {
        name: '',
        email: '',
        phone: '',
        subject: '',
        message: '',
        contactMethod: '',
        newsletter: false
      };
      errors = {
        name: '',
        email: '',
        phone: '',
        subject: '',
        message: '',
        contactMethod: ''
      };
    } else {
      console.log('Form has validation errors:', errors);
    }
  }
</script>

<div class="container" style="max-width: 600px; margin: 0 auto; padding: 2rem;">
  <h1 class="h3 mbe24">Contact Us</h1>

  <form on:submit={handleSubmit}>
    <!-- Name Input -->
    <div class="mbe16">
      <Input
        uniqueId="name-input"
        type="text"
        label="Full Name"
        bind:value={formData.name}
        isInvalid={!!errors.name}
        invalidText={errors.name}
        helpText="Enter your full name"
        required
        on:blur={handleNameBlur}
      />
    </div>

    <!-- Email Input -->
    <div class="mbe16">
      <Input
        uniqueId="email-input"
        type="email"
        label="Email Address"
        bind:value={formData.email}
        isInvalid={!!errors.email}
        invalidText={errors.email}
        helpText="We'll use this to respond to your inquiry"
        required
        on:blur={handleEmailBlur}
      />
    </div>

    <!-- Phone Input (Optional) -->
    <div class="mbe16">
      <Input
        uniqueId="phone-input"
        type="tel"
        label="Phone Number (Optional)"
        bind:value={formData.phone}
        isInvalid={!!errors.phone}
        invalidText={errors.phone}
        helpText="Include country code if outside US"
        on:blur={handlePhoneBlur}
      />
    </div>

    <!-- Subject Input -->
    <div class="mbe16">
      <Input
        uniqueId="subject-input"
        type="text"
        label="Subject"
        bind:value={formData.subject}
        isInvalid={!!errors.subject}
        invalidText={errors.subject}
        required
        on:blur={handleSubjectBlur}
      />
    </div>

    <!-- Message Textarea -->
    <div class="mbe16">
      <Input
        uniqueId="message-input"
        type="textarea"
        label="Message"
        bind:value={formData.message}
        isInvalid={!!errors.message}
        invalidText={errors.message}
        helpText="Please provide details about your inquiry"
        required
        rows="5"
        on:blur={handleMessageBlur}
      />
    </div>

    <!-- Preferred Contact Method (Radio) -->
    <div class="mbe16">
      <ChoiceInput
        uniqueId="contact-method"
        type="radio"
        legendLabel="Preferred Contact Method"
        bind:value={formData.contactMethod}
        isInvalid={!!errors.contactMethod}
        invalidText={errors.contactMethod}
      >
        <ChoiceInputOption label="Email" value="email" />
        <ChoiceInputOption label="Phone" value="phone" />
        <ChoiceInputOption label="Either" value="either" />
      </ChoiceInput>
    </div>

    <!-- Newsletter Checkbox -->
    <div class="mbe24">
      <ChoiceInput
        uniqueId="newsletter"
        type="checkbox"
        isFieldset={false}
        bind:value={formData.newsletter}
      >
        <ChoiceInputOption
          label="Subscribe to our newsletter for updates and tips"
          value={true}
        />
      </ChoiceInput>
    </div>

    <!-- Submit Button -->
    <Button
      type="submit"
      mode="primary"
      isRounded
      isBlock
      size="large"
    >
      Send Message
    </Button>
  </form>
</div>

<style>
  .container {
    font-family: system-ui, -apple-system, sans-serif;
  }
</style>

This complete form includes:

Multiple input types: Text, email, tel, and textarea
Real-time validation: Validates on blur and on submit
Error messages: Displays specific error messages for each field
Radio buttons: Using ChoiceInput for contact method selection
Checkbox: Newsletter subscription option
Accessibility: All fields are properly labeled and have ARIA attributes
Form reset: Clears form after successful submission

Common Issues / Troubleshooting

Validation errors not showing

Ensure isInvalid prop is set to true when there's an error
Check that invalidText contains the error message string
Verify the validation function returns a non-empty string for errors

Two-way binding not working

Make sure you're using bind:value (not just value)
Check that the variable is declared with let (not const)
Verify the component supports binding (all AgnosticUI form components do)

CSS styles not applying

Ensure you've imported the CSS: import 'agnostic-svelte/css/common.min.css'
Check that the import is in the root layout or main entry file
Verify the import path matches your package manager's structure

Form submission not preventing default

Add |preventDefault modifier: on:submit|preventDefault={handleSubmit}
Or call event.preventDefault() at the start of your handler function

Next Steps

Now that you have a working form with validation, consider:

Server-side validation: Implement validation on your backend API
Async validation: Add email uniqueness checks or other async validations
Form state management: Use Svelte stores for complex multi-step forms
Custom validation rules: Create reusable validation utilities
Accessibility enhancements: Test with screen readers and keyboard navigation
Form libraries integration: Consider integrating with form libraries like Felte or Svelte Forms Lib

For more information, visit the AgnosticUI documentation and explore other components like Dialog, Select, and DatePicker for more complex form scenarios.

Summary

You've learned how to build accessible, validated forms using AgnosticUI components in Svelte. The form includes multiple input types, real-time validation, error handling, and proper accessibility features. You can now create production-ready forms that work seamlessly with Svelte's reactivity system while maintaining full accessibility compliance.