🚀. Socket Launch Week Day 2:Introducing Manifest Alerts.Learn more →
Sign In

@kern-ux/native

Package Overview
Dependencies
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@kern-ux/native

Native Styles und Komponenten-Bibliothek für das KERN-UX Design System. Beinhaltet CSS, Fonts und KERN-Komponenten.

latest
npmnpm
Version
2.6.2
Version published
Weekly downloads
6K
41.91%
Maintainers
1
Weekly downloads
 
Created
Source

KERN Design System – Plain-CSS-HTML-Kit

npm version License: EUPL 1.2

Deutsch | English

Deutsch

Was ist KERN?

Mit KERN schaffen wir einen offenen UX-Standard für die deutsche Verwaltung, der Umsetzende befähigt, barrierefreie digitale Verwaltungslösungen effizient und nutzendenzentriert zu entwickeln. KERN ist ein Open-Source-Projekt, das von den Ländern Hamburg und Schleswig-Holstein initiiert wurde. Alle Informationen findest du auf www.kern-ux.de.

Dieses Repository enthält die Plain CSS/HTML-Referenzimplementation des KERN-Designsystems und ist auf npm unter dem Namen @kern-ux/native verfügbar.

English

What is KERN?

KERN is an open UX standard for the German public administration. It enables development teams to build accessible digital government services efficiently and with a user-centered focus. KERN is an open-source project initiated by the federal states of Hamburg and Schleswig-Holstein. Learn more at www.kern-ux.de.

This repository contains the plain CSS/HTML reference implementation of the KERN Design System, published on npm as @kern-ux/native.

🚀 Einbindung & Installation

Du kannst KERN auf drei verschiedene Arten in dein Projekt integrieren:

Methode 1: Einbindung über NPM (Empfohlen)

Füge @kern-ux/native zu deinen Projektabhängigkeiten hinzu:

npm install @kern-ux/native --save

Binde anschließend die CSS-Stylesheets und Schriftarten ein:

// JavaScript / TypeScript Bundler
import '@kern-ux/native/dist/kern.min.css';
import '@kern-ux/native/dist/fonts/fira-sans.css'; // Hauptschriftart (Fira Sans)
import '@kern-ux/native/dist/fonts/noto-sans.css'; // Optional (Noto Sans)

Oder in deiner Haupt-CSS/SCSS-Datei:

@import "@kern-ux/native/dist/kern.min.css";
@import "@kern-ux/native/dist/fonts/fira-sans.css";

Methode 2: Einbindung per CDN

Wenn du KERN ohne ein Buildtool/NPM verwenden möchtest, binde die CSS-Dateien direkt über ein CDN in deinen <head> ein:

  • Alternative A: jsdelivr

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kern-ux/native/dist/kern.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kern-ux/native/dist/fonts/fira-sans.css" />

  • Alternative B: unpkg

    <link rel="stylesheet" href="https://unpkg.com/@kern-ux/native/dist/kern.min.css" />
<link rel="stylesheet" href="https://unpkg.com/@kern-ux/native/dist/fonts/fira-sans.css" />

Methode 3: Kopieren der Bibliothek

Lade die neueste Version direkt als ZIP-Archiv von der Release-Seite des KERN-UX Repositories herunter. Entpacke die ZIP-Datei und binde die kompilierten CSS-Dateien oder die SCSS-Quelldateien direkt in dein Projekt ein.

🛠 Einbindung & Imports

JavaScript-Komponenten

Interaktive Komponenten (wie das Kopfzeilen-Menü) benötigen das mitgelieferte JavaScript zur Initialisierung:

import '@kern-ux/native/dist/js/kern-kopfzeile.js';

🧩 Komponenten-Beispiele

Hier sind einige grundlegende Komponenten-Markups mit BEM-Klassen (kern-*) und integrierten Barrierefreiheits-Attributen:

1. Buttons

<button type="button" class="kern-btn kern-btn--primary">
  <span class="kern-label">Primary Button</span>
</button>
<button type="button" class="kern-btn kern-btn--secondary">
  <span class="kern-label">Secondary Button</span>
</button>
<button type="button" class="kern-btn kern-btn--tertiary">
  <span class="kern-label">Tertiary Button</span>
</button>

2. Badges

<span class="kern-badge kern-badge--info">
  <span class="kern-label">Information</span>
</span>
<span class="kern-badge kern-badge--success">
  <span class="kern-label">Erfolg</span>
</span>
<span class="kern-badge kern-badge--warning">
  <span class="kern-label">Warnung</span>
</span>
<span class="kern-badge kern-badge--danger">
  <span class="kern-label">Fehler</span>
</span>

3. Description List (Beschreibungsliste)

<dl class="kern-description-list">
  <div class="kern-description-list-item">
    <dt class="kern-description-list-item__key">Name</dt>
    <dd class="kern-description-list-item__value">Musterperson</dd>
  </div>
  <div class="kern-description-list-item">
    <dt class="kern-description-list-item__key">Vorname</dt>
    <dd class="kern-description-list-item__value">Kim</dd>
  </div>
  <div class="kern-description-list-item">
    <dt class="kern-description-list-item__key">E-Mail</dt>
    <dd class="kern-description-list-item__value">kim@musterperson.de</dd>
  </div>
  <div class="kern-description-list-item">
    <dt class="kern-description-list-item__key">Adresse</dt>
    <dd class="kern-description-list-item__value">Musterstraße 2, 23456 Musterstadt</dd>
  </div>
</dl>

♿️ Barrierefreiheit

Barrierefreiheit ist der Kern unseres Design-Systems:

  • Farbkontraste erfüllen die WCAG 2.1 AA/AAA Richtlinien.
  • Semantisches HTML5 und korrekte WAI-ARIA-Rollen werden aktiv unterstützt.
  • Der Tastatur-Fokus ist in allen interaktiven Zuständen deutlich erkennbar.

💡 Wichtiger Hinweis für Entwickler:innen: Auf jeder einzelnen Komponentenseite auf kern-ux.de (wie z. B. auf der Button-Komponentenseite) findest du am Ende einen dedizierten Abschnitt zur Barrierefreiheit. Hier siehst du übersichtlich, was bereits geprüft wurde und worauf du bei der Einbindung in deiner Anwendung noch achten musst. Nutze dort die bereitgestellten Checklisten zur Absicherung.

💻 Lokale Entwicklung (für Mitwirkende)

Wenn du am Plain-Kit selbst mitwirken möchtest:

git clone https://gitlab.opencode.de/kern-ux/kern-ux-plain.git
cd kern-ux-plain
npm install
npm start # Startet die Storybook-Entwicklungsumgebung auf Port 6006

Verfügbare Befehle:

  • npm run build - Kompiliert SCSS/CSS und baut Storybook
  • npm run test:a11y - Führt automatisierte Barrierefreiheits-Tests aus
  • npm run test:visual - Führt visuelle Regressionstests via BackstopJS aus

🤝 Beitragen

Bugs und Verbesserungsvorschläge, die sich ausschließlich auf den CSS/HTML-Code beziehen, können im Issue-Tracker auf OpenCode gemeldet werden.

Bitte lies unsere Contributing Guidelines vor der Erstellung eines Merge Requests.

📄 Lizenz

Lizenziert unter der EUPL-1.2 (European Union Public Licence v. 1.2). Weitere Details findest du in der LICENSE.md Datei.

🔗 Nützliche Links

Keywords

kern-ux
design-system
native
css-library
dachmarke
ux

FAQs

Package last updated on 26 May 2026

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

140+ Mastra npm Packages Compromised in Coordinated Supply Chain Attack

Research

140+ Mastra npm Packages Compromised in Coordinated Supply Chain Attack

More than 140 Mastra npm packages were compromised in a supply chain attack that used a typosquatted dependency to deliver a cross-platform infostealer during installation.

By Socket Research Team  -  Jun 17, 2026
Introducing Manifest Alerts

Product

Introducing Manifest Alerts

Socket now detects supply chain risks in project manifests, starting with missing lockfiles that can make dependency installs non-reproducible.

By André Staltz, Trevor Norris  -  Jun 16, 2026