Svelte UI

A Svelte component library with TypeScript support and Material Design-inspired styling.

⚠️ Preview Release: This library is in preview. APIs may change before the stable 1.0 release.

Features

• Material Design-inspired components
• ARIA support and keyboard navigation
• Touch-optimized for mobile devices
• Dark mode and high contrast mode support
• TypeScript definitions included
• Tree-shakeable ES modules
• Built with Svelte 5 runes API

Installation

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

Setup

1. Import Styles

Components read their colors and sizes from --svelte-ui-* CSS variables, so the design tokens must be loaded.

For an app, import everything (recommended):

// Icon fonts + design tokens + app-wide base rules
import '@14ch/svelte-ui/styles';

For a package that embeds svelte-ui components into other apps, import only what the components need, so nothing leaks into the host page:

// Design tokens only: CSS variables on :where(:root) and the dark/high-contrast switches.
// No external requests, no rules on elements.
import '@14ch/svelte-ui/styles/tokens';

// Material Symbols fonts (loaded from Google Fonts).
// Needed only when components render an icon: Icon, IconButton, Fab, the `icon` props,
// and built-in icons such as clear buttons, popup arrows, pickers and PopupMenu check marks.
import '@14ch/svelte-ui/styles/icons';

Components render the same with styles/tokens alone as with the full styles. The full import additionally applies these base rules to the whole page: box-sizing: border-box on every element, a reset for button, color: inherit for dialog, font-weight: normal for label, the autofill background fix for input, and the .sr-only class.

Optional extras (Sass sources; your build needs sass):

import '@14ch/svelte-ui/styles/optional/fonts.scss'; // Roboto, Noto Sans JP, YakuHanJP
import '@14ch/svelte-ui/styles/optional/reset.scss'; // CSS reset

2. Basic Usage

<script>
    import { Button, Input, Dialog } from '@14ch/svelte-ui';

    let dialogRef;
    let inputValue = $state('');
</script>

<Input bind:value={inputValue} placeholder="Enter your name" />

<Button onclick={() => dialogRef.open()}>Open Dialog</Button>

<Dialog bind:this={dialogRef} title="Greeting">
    <p>Hello {inputValue}!</p>
    <p>Welcome to Svelte UI Component Library.</p>
    {#snippet footer()}
        <Button onclick={() => dialogRef.close()}>Close</Button>
    {/snippet}
</Dialog>

Available Components

Form Components

• Button - Various button styles and states
• Input - Text input with validation support
• Textarea - Multi-line text input
• Checkbox - Checkbox with custom styling
• CheckboxGroup - Multiple checkbox selection group
• Radio - Radio button groups
• RadioGroup - Radio button group wrapper
• Select - Dropdown selection
• Combobox - Searchable dropdown
• Slider - Range slider input
• Switch - Toggle switch
• ColorPicker - Color selection input
• Datepicker - Date selection with calendar
• FileUploader - File upload with drag & drop
• ImageUploader - Image upload with preview

Layout & Navigation

• Tab / TabItem - Tab navigation
• Pagination - Page navigation

Modals

• Dialog - Modal dialogs
• ConfirmDialog - Confirmation dialogs
• Drawer - Side drawer

Popups & Menus

• Popup - Popover content
• PopupMenu / PopupMenuButton - Context menus

Notifications & Feedback

• Snackbar / SnackbarItem - Toast notifications
• LoadingSpinner - Loading indicators

Skeleton Loaders

• Skeleton - Loading placeholders with preset patterns

Icons & Buttons

• Icon - Material Symbols icons
• IconButton - Icon-based buttons
• Fab - Floating Action Button

Component Examples

Button Variants

<script>
    import { Button } from '@14ch/svelte-ui';
</script>

<!-- Different variants -->
<Button variant="filled">Filled Button</Button>
<Button variant="outlined">Outlined Button</Button>
<Button variant="text">Text Button</Button>

<!-- With icons -->
<Button icon="add">Add Item</Button>

<!-- Different sizes -->
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>

<!-- States -->
<Button disabled>Disabled</Button>
<Button loading>Loading...</Button>

Form Validation

<script>
    import { Input, Checkbox, Button } from '@14ch/svelte-ui';

    let email = $state('');
    let password = $state('');
    let agreed = $state(false);

    const handleSubmit = () => {
        if (!email || !password || !agreed) {
            alert('Please fill all fields');
            return;
        }
        // Handle form submission
    };
</script>

<Input bind:value={email} type="email" placeholder="Email" required />

<Input bind:value={password} type="password" placeholder="Password" required />

<Checkbox bind:value={agreed}>I agree to the terms and conditions</Checkbox>

<Button onclick={handleSubmit} disabled={!agreed}>Sign Up</Button>

Checkbox & Radio Groups

<script>
    import { CheckboxGroup, RadioGroup } from '@14ch/svelte-ui';

    const options = [
        { label: 'Option 1', value: 'opt1' },
        { label: 'Option 2', value: 'opt2' },
        { label: 'Option 3', value: 'opt3' }
    ];

    let selectedCheckboxes = $state([]);
    let selectedRadio = $state(null);
</script>

<CheckboxGroup bind:value={selectedCheckboxes} {options} direction="vertical" gap="16px" />

<RadioGroup bind:value={selectedRadio} {options} direction="horizontal" gap="24px" />

Skeleton Loaders

<script>
    import { Skeleton, SkeletonBox, SkeletonText, SkeletonAvatar } from '@14ch/svelte-ui';
</script>

<!-- Using preset patterns -->
<Skeleton patterns={[{ type: 'article-list' }]} repeat={3} />
<Skeleton patterns={[{ type: 'product-list' }]} repeat={4} />

<!-- Using individual components for custom layouts -->
<div>
    <SkeletonAvatar showName={true} />
    <SkeletonBox width="100%" height="200px" />
    <SkeletonText lines={3} />
</div>

Dialog with Confirmation

<script>
    import { Button, ConfirmDialog } from '@14ch/svelte-ui';

    let confirmDialogRef;

    const handleDelete = () => {
        confirmDialogRef.open();
    };

    const onConfirm = () => {
        // Delete logic here
        console.log('Item deleted');
        confirmDialogRef.close();
    };
</script>

<Button variant="outlined" onclick={handleDelete}>Delete Item</Button>

<ConfirmDialog
    bind:this={confirmDialogRef}
    title="Confirm Delete"
    message="Are you sure you want to delete this item? This action cannot be undone."
    onconfirm={onConfirm}
    oncancel={() => confirmDialogRef.close()}
/>

Dark Theme

Apply dark mode by setting the data-theme attribute:

<script>
    import { Button } from '@14ch/svelte-ui';
    import { onMount } from 'svelte';

    let theme = $state('light');

    const toggleTheme = () => {
        theme = theme === 'light' ? 'dark' : 'light';
        document.body.setAttribute('data-theme', theme);
    };

    onMount(() => {
        document.body.setAttribute('data-theme', theme);
    });
</script>

<Button onclick={toggleTheme}>Toggle Theme</Button>

You can also apply dark mode to specific sections:

<div data-theme="dark">
    <!-- This section and its children will use dark mode -->
    <Button>Dark Mode Button</Button>
</div>

Customization

CSS Custom Properties

The library uses CSS custom properties for easy theming:

:root {
    --svelte-ui-primary-color: #1976d2;
    --svelte-ui-surface-color: #ffffff;
    --svelte-ui-text-color: #1f1f1f;
    --svelte-ui-border-radius: 8px;
    /* ... and many more */
}

Customizing Dark Mode Colors

You can customize dark mode colors by overriding CSS variables:

[data-theme='dark'] {
    --svelte-ui-primary-color: #90caf9;
    --svelte-ui-surface-color: #121212;
    --svelte-ui-text-color: #ffffff;
    /* ... customize other colors as needed */
}

TypeScript Support

All components come with full TypeScript definitions:

import type { MenuItem } from '@14ch/svelte-ui';

const menuItems: MenuItem[] = [
    { title: 'Home', href: '/' },
    { title: 'About', href: '/about' },
    { title: 'Contact', href: '/contact' }
];

Accessibility

This library is built with accessibility in mind:

• Proper ARIA attributes
• Keyboard navigation support
• Screen reader announcements
• Focus management
• High contrast mode support

Browser Support

• Chrome/Edge 88+
• Firefox 78+
• Safari 14+

License

MIT License - see the LICENSE file for details.

Changelog

v0.0.5

• Improved TabItem hover behavior: replaced background color with indicator bar opacity change
• TabItem now shows selected text color and indicator bar on hover for better visual feedback
• Breaking change: Replaced variant prop with inline prop in Combobox, Datepicker, and Select components

v0.0.3

• Improved text vertical alignment in Button, Fab, TabItem, Checkbox, and Radio components using text-box-trim
• Text labels now appear more visually centered within their containers

v0.0.2

(Previous release notes...)

v0.0.1

• Initial release
• 40+ components (Button, Input, Dialog, Skeleton loaders, etc.)
• CheckboxGroup and RadioGroup
• Skeleton component with preset patterns
• Material Design-inspired styling
• TypeScript support
• ARIA, keyboard navigation, screen reader support
• High contrast mode support
• Svelte 5 runes API