SvelteUI Documentation

SvelteUI is a comprehensive Svelte library designed to handle components, custom actions, transitions, and utilities. Key features include:

• SvelteKit and SSR Compatibility: Works seamlessly with Server-Side Rendering.
• TypeScript Support: Full type definitions are available (though optional).
• Accessibility: All components follow WAI-ARIA standards.
• Theming: Includes a built-in dark theme and a custom theming API.
• Customizability: Highly customizable to fit growing application needs.
• Low Overhead: Minimal to no third-party dependencies.
• Zero Configuration: Designed to work out-of-the-box.

The PasswordInput component supports several visual and functional states:

• Invalid state and error: Display error states for validation.
• Disabled state: Prevent user interaction.
• With icon: Add decorative or functional icons.
• With custom visibility icon: Replace the default visibility toggle icon.
• Controlled visibility state: Manually control whether the password is visible or hidden.
• Visibility toggle focus: Manage focus behavior when interacting with the visibility toggle.

SvelteUI is distributed across several specialized packages:

• @svelteuidev/core: The main library containing 40+ core components.
• @svelteuidev/composables: A collection of 20+ utilities and actions.
• @svelteui/motion: A collection of transitions and animations.
• @svelteuidev/prism: Code highlighting built with PrismJS.

SvelteUI is modularized into several specialized packages to allow for granular installation and usage:

• @svelteui/core: The main library containing 40+ core components.
• @svelteui/composables: A collection of 20+ useful actions and utilities.
• @svelteui/motion: A collection of transitions designed for use on DOM elements.
• @svelteui/prism: A code highlighting component powered by the Prism action.
• @svelteui/dates: Components for calendars, date pickers, and time pickers.
• @svelteui/preprocessors: A Svelte preprocessor library to assist in various development tasks.

SvelteUI's default theme is based on Stitches Theme Tokens. The theme is a structured object containing various design tokens like colors, spacing, and typography.

Note: As of version 0.6.0, you cannot customize the default theme object directly. To use a custom theme, you must create your own using the createStyles function.

{
    "prefix": "svelteui",
    "theme": {
        "colors": {},
        "space": {},
        "fontSizes": {},
        "fonts": {},
        "fontWeights": {},
        "lineHeights": {},
        "letterSpacings": {},
        "sizes": {},
        "borderWidths": {},
        "borderStyles": {},
        "radii": {},
        "shadows": {},
        "zIndices": {},
        "transitions": {}
    }
}

SvelteUI components forward all events to their underlying DOM elements. You can attach standard Svelte event handlers directly to components.

Note on Event Modifiers: Because of library-level forwarding, you cannot use the standard pipe operator (|) for event modifiers. Instead, you must use the ! character to separate the event from the modifier.

<script>
	import { Button } from '@svelteuidev/core';

	let clicked = false;
</script>

<Button on:click={() => (clicked = true)}>
	{clicked ? "Don't click me anymore" : 'Click me'}
</Button>