UI Kit

@azure-net/ui-kit provides Svelte widgets and DOM utilities. This guide describes the sibling package's current source (package.json version 0.4.7).

Install

pnpm add @azure-net/ui-kit

The declared peers are Svelte ^5.29.0 and SvelteKit >=2.16.0. The implementation uses attachments and $props.id(). The inspected workspace has Svelte 5.57.2. Use the SvelteKit/Vite Svelte integration to compile the package. @azure-net/tools ^2.1.0 is a regular dependency installed with it. No @azure-net/kit application registration is needed.

Import boundaries

import { clickOutside, masked, createZoomable } from '@azure-net/ui-kit';
import { Slider, Cropper, ModalContainer, NotificationContainer } from '@azure-net/ui-kit/widgets';
import '@azure-net/ui-kit/slider.css'; // Optional Slider decoration only

The root exports utilities only. Widgets are exported from /widgets, not the root. There is no supported /components, /utils, or deep /dist import. No global stylesheet is required for structural widget layout; Slider decoration needs both the CSS import and styled={true}.

Runtime export inventory

These are the 23 runtime exports found in the two public barrels. Every row links to usage and API details.

Entry point	Exports	Guide
/widgets	ModalContainer, modalManager	Modals
/widgets	NotificationContainer, notificationManager	Notifications
/widgets	Slider	Slider
/widgets	Cropper	Cropper
/widgets	progressBar, useRouteLoadBar	Progress
root	zoomable, createZoomable	Zoom
root	useAnimate, attachAnimation	Animations
root	event, once, stop, immediate, prevent	DOM utilities
root	clickOutside, onClickOutside	DOM utilities
root	masked, Mask, masks, scrollTo	DOM utilities

There is no exported createZoom, ProgressBar component, Modal component, Button, or Input. Modal is a type; the default modal template is internal.

Public type inventory

Import these with import type from the indicated entry point. Component props not re-exported by name can be obtained with Svelte's ComponentProps<typeof Component>.

Entry point	Types
root	EventHandler, OnClickOutsideOptions, OnClickOutsideEventDetail, OnClickOutsideEventType, MaskedOptions, MaskValue, ScrollToOptions, UseAnimateOptions, ZoomController, ZoomTransform, ZoomPoint, ZoomableOptions
/widgets	NotificationThemes, NotificationPositions, Notification, NotificationConfig, ModalOptions, ModalConfig, Modal, ModalTemplateProps, StoredModal, PropsWithCloseModal, ProgressBarManager, ProgressBarOptions, CropperApi, CropperExportOptions, CropperProps, CropRect, SliderApi, SliderProps, SliderLayout

Internal declarations such as ModalHandle, ModalContainerProps, NotificationContainerProps, CropperResizeHandle, Tokens, and TokenSettings are not named exports of these public entry points. Do not deep-import them just because they exist in source.

Root layout and SSR

<script lang="ts">
  import { ModalContainer, NotificationContainer } from '@azure-net/ui-kit/widgets';
  let { children } = $props();
</script>

{@render children()}
<ModalContainer />
<NotificationContainer />

Mount one container of each kind in a persistent layout. Managers acquire their stores on mount; opening overlays during SSR or before mount fails. Prefer user event handlers for opening them. Do not store request-specific overlays in module-level state.

Slider renders slides and responsive CSS on the server; measurement and interactions start in the browser. Cropper renders string image sources during SSR, but export is browser-only after image load. Zoom controller creation is SSR-safe, while attachments/actions perform DOM work after mounting. scrollTo returns false on the server. Progress-bar DOM operations require the browser.

Accessibility and styling responsibilities

Slider and Cropper include keyboard interactions. Modal markup supplies a dialog role but does not implement a focus trap or focus restoration: add those in your application and give dialogs accessible names. Notifications are not automatically live regions; use a custom snippet when announcements are needed. Avoid claiming full accessibility compliance from widget usage alone.

Examples use Svelte 5 snippets, callback props and attachments. Built-in labels are not all localized; custom Slider controls and notification snippets let you supply your own language. Styling and behavior details live on each widget page.