@flitsmeister/design-system

Flitsmeister design system for modern web apps. Version 3 and higher ships Lit-based web components that can be used from plain HTML, Lit, React, Vue, Angular, Svelte, or any other framework that supports custom elements.

Note: npm v2.x of this package contained Vue components and design tokens. npm v3.x is a new web component package under the same package name.

Install

npm install @flitsmeister/design-system

With pnpm:

pnpm add @flitsmeister/design-system

The package requires Node.js 24 or newer for local tooling and publishing. Runtime components are browser custom elements built with Lit.

Quick Start

Import the components you use, then render the matching custom elements in your HTML.

import '@flitsmeister/design-system/fm-button'
import '@flitsmeister/design-system/fm-input'

<fm-input id="email" placeholder="Email" type="email"></fm-input>
<fm-button role="primary" buttontype="filled">Opslaan</fm-button>

For icons, import the icon component and register icons before using them.

import '@flitsmeister/design-system/fm-icon/all'

<fm-icon name="check" variant="filled" size="md"></fm-icon>
<fm-button role="primary" icon="add" icon-variant="bold">Toevoegen</fm-button>

Components

| Component | Import | Description | | --- | --- | --- | | fm-button | @flitsmeister/design-system/fm-button | Accessible button with variants, sizes, icons, loading, success, and error states. | | fm-input | @flitsmeister/design-system/fm-input | Text input with floating label, validation rules, loading, success, and error states. | | fm-radio-input | @flitsmeister/design-system/fm-radio-input | Radio-card option with label, media, description, and native radio behavior. | | fm-segmented-controller | @flitsmeister/design-system/fm-segmented-controller | Segmented control backed by a native radio group. | | fm-dropdown | @flitsmeister/design-system/fm-dropdown | Animated dropdown backed by a hidden native select for forms and accessibility. | | fm-wizard | @flitsmeister/design-system/fm-wizard | Wizard stepper with declarative fm-wizard-node configuration. | | fm-icon | @flitsmeister/design-system/fm-icon | Icon element using the generated Flitsmeister icon registry. |

You can also import the package root to register the main component set:

import '@flitsmeister/design-system'

Installer CLI

The package includes a small setup CLI:

npx --package @flitsmeister/design-system design-system-install

After installing the package in a project:

npm exec design-system-install

fm-ui-install is available as an alias for the same CLI.

Version History

| Version | Contents | Repository | | --- | --- | --- | | 3.x | Lit web components (fm-button, fm-input, fm-dropdown, and more) | design-system-v2 | | 2.x | Vue components and design tokens | design-system |