@knime/kds-components

@knime/kds-components

Vue 3 components library for the KNIME Design System.

This is part of the KNIME Design System.

Installation

vue and @vueuse/core are peer dependencies. @knime/kds-styles provides the design tokens every component styles against; it comes along as a dependency, but install it directly too so your app can import its CSS:

pnpm add @knime/kds-components @knime/kds-styles vue @vueuse/core

Usage

Import the CSS variables once in your app entry, then use the components:

// main.ts — required once; components render unstyled without it
import "@knime/kds-styles/kds-variables.css";

<script setup lang="ts">
import { KdsButton, KdsIcon } from "@knime/kds-components";
</script>

<template>
  <!-- Components are configured through props; slot exposure is kept minimal
       on purpose so usage stays consistent across KNIME applications. -->
  <KdsButton label="Confirm" leading-icon="checkmark" variant="filled" />
  <KdsIcon name="checkmark" />
</template>

See the @knime/kds-styles README for the other CSS entry points (index.css, fonts.css) and for enabling dark mode.

Using with Vitest, Nuxt, or Vite SSR

The published JavaScript imports its CSS as a side effect (e.g. import "./index.css"), which bundlers handle automatically. When the package is instead evaluated by Node's native ESM loader — as Vitest and Vite/Nuxt SSR do by default, since they externalize node_modules — Node has no .css loader and throws Unknown file extension ".css". Configure the consuming project once so @knime/* packages are processed instead of externalized:

// Vitest — vitest.config.ts
export default defineConfig({
  test: { server: { deps: { inline: [/@knime\//] } } },
});

// Vite SSR — vite.config.ts
export default defineConfig({ ssr: { noExternal: [/@knime\//] } });

// Nuxt — nuxt.config.ts
export default defineNuxtConfig({ build: { transpile: [/@knime\//] } });

Available components

The component set changes frequently, so the authoritative, always-current list is the live Storybook, which documents every component's props, events, and slots.

Everything re-exported from src/index.ts is public API, grouped as:

To discover components from an AI agent, use the /frontend:kds-components skill rather than reading the sources.

Development

Building

Run from the monorepo root (this package's build depends on @knime/kds-styles and @knime/utils being built first):

pnpm build                # all packages, in dependency order
pnpm build:components     # only this package

License

KNIME-Commercial-License-2.0