@softwareone/spi-sv5-library

SoftwareOne's Svelte 5 UI component library — a collection of accessible, composable components for building modern web applications with Svelte 5 (runes) and SvelteKit 2.

Requirements

• Svelte ^5.0.0
• Node 22+

Installation

npm install @softwareone/spi-sv5-library

Optional peer dependencies

Install only what you use:

| Peer dependency | Required for | | ------------------------------------------------- | ------------------------------------ | | material-icons + material-icons-outlined | Icon rendering across all components | | sveltekit-superforms + zod | @softwareone/spi-sv5-library/form | | @tanstack/table-core + exceljs + file-saver | @softwareone/spi-sv5-library/table |

Quick start

<script lang="ts">
	import { Button, Modal } from '@softwareone/spi-sv5-library';

	let showModal = $state(false);
</script>

<Button onclick={() => (showModal = true)}>Open modal</Button>

<Modal bind:show={showModal} title="Hello">
	<p>Modal content goes here.</p>
</Modal>

Components

Layout & Navigation

| Component | Description | | ---------- | ----------------------------------------------------------------------------------- | | Header | Full application bar with built-in menu, account, loader, waffle, and announcements | | Footer | Application footer | | Sidebar | Collapsible navigation sidebar | | Tabs | Tabbed content navigation | | Switcher | Segmented option switcher |

Feedback & Overlays

| Component | Description | | ------------------------- | ----------------------------------------------- | | Modal | Dialog overlay with header, content, and footer | | ConfirmationModal | Pre-built confirmation dialog | | DeleteConfirmationModal | Pre-built delete confirmation dialog | | Toast | Toast notification system | | Notification | Inline alert/notification banner | | Spinner | Loading spinner | | Processing | Full-screen processing overlay | | Tooltip | Hover tooltip |

Data Display

| Component | Description | | ---------------- | --------------------------------------------- | | Card | Content container with optional header/footer | | Accordion | Collapsible content sections | | HighlightPanel | Key-value panel with configurable columns | | Chips | Tag / badge chips | | Avatar | User avatar — image or initials fallback | | ProgressWizard | Multi-step wizard with step validation | | ProgressPage | Linear step-by-step progress page |

Forms & Controls

| Component | Description | | ------------ | -------------------------- | | Input | Text input | | TextArea | Multi-line text input | | Select | Dropdown select | | RadioGroup | Radio button group | | Toggle | On/off toggle switch | | AttachFile | File attachment picker | | Label | Form label | | Search | Search input with debounce |

General

| Component | Description | | ----------- | ----------------------- | | Button | Action button | | Link | Styled anchor | | Home | Application home layout | | ErrorPage | Error state page |

Sub-packages

Form components

Integrates with sveltekit-superforms and zod.

import { ... } from '@softwareone/spi-sv5-library/form';

Table component

Advanced data table built on @tanstack/table-core with sorting, filtering, pagination, column visibility, and Excel export.

import { ... } from '@softwareone/spi-sv5-library/table';

API reference

Header

<Header
	title="My App"
	homeUrl="/"
	accountName="Contoso"
	accountDescription="Microsoft Partner"
	userName="John Doe"
	{menuItems}
	{waffleItems}
	{profileMenuItems}
	{announcementItems}
	onreadannouncementitems={() => {}}
/>

Button

<Button
  variant="primary"      <!-- 'primary' | 'secondary' | 'outline' | 'outline-none' -->
  variantColor="primary" <!-- 'primary' | 'danger' -->
>
  Label
</Button>

Modal

<script lang="ts">
  let showModal = $state(false);
</script>

<Modal
  bind:show={showModal}
  title="Confirm action"
  width="xs"           <!-- 'xs' | 'md' | 'lg' | 'xl' -->
>
  <p>Body content.</p>

  {#snippet footer()}
    <Button onclick={() => (showModal = false)}>Close</Button>
  {/snippet}
</Modal>

Tabs

<script lang="ts">
	import type { Tab } from '@softwareone/spi-sv5-library';
	const tabs: Tab[] = [
		{ index: 0, label: 'Overview' },
		{ index: 1, label: 'Settings' }
	];
	let active = $state(0);
</script>

<Tabs {tabs} bind:activeTab={active} onchange={(i) => console.log(i)} />

Exported types

import type {
	AnnouncementItem,
	HighlightPanelColumn,
	HomeItem,
	MainMenu,
	MenuItem,
	SubMenuItem,
	ModalProps,
	ProgressWizardStep,
	RadioOption,
	SelectOption,
	SwitcherOption,
	Tab,
	ToastNotification,
	WaffleItem
} from '@softwareone/spi-sv5-library';

Exported enums

import { ChipType, ColumnType, ImageType } from '@softwareone/spi-sv5-library';

License

MIT © SoftwareOne