KERN Web-Components-Kit

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.

Disclaimer

Das KERN Web-KitComponents-Kit ist eine Implementation des KERN Design-Systems innerhalb eines Community-Projekts. Das KERN Projektteam ist nicht dafür verantwortlich und kann Dir bei der Nutzung nicht helfen. Kontaktiere den Maintainer direkt, wenn Du Hilfe benötigst, einen Bug melden möchtest oder eine Funktion anfragen willst. Dies funktioniert am besten durch die Erstellung eines Bugs oder eines Issues im Ticket-System dieses Repositorys.

Verantwortlich und Maintainer für dieses Repository ist: Axel Wolters, @OC000011858689

Neue Komponenten sollten über ein Ticket im Haupt-Repository angefragt werden, damit alle Umsetzungen davon profitieren können.

Weitere Information findest Du in den Dateien CODE_OF_CONDUCT, CONTRIBUTING, LICENSE, CHANGELOG und COMPONENTS.

🚀 Quick Start

1. KERN Release: Dieses Projekt befindet sich in aktiver Entwicklung. Die aktuelle Version 2.20.6 (Release: Juli 2025) basiert auf dem KERN – Plain-CSS-HTML-Kit in der Version 2.2.0 und nutzt dessen CSS-Klassen und HTML-Code-Beispiele.

2. Live Demo und Beispiele:

   • Die Web Components werden in Storybook entwickelt und dokumentiert.
   • Es gibt ein Figma Beispiel für einen Online-Dienst.
   • Und eine Umsetzung des Beispiels mit den Web Componenten.

3. Dokumentation: Die Dokumentation ist derzeit komplett in englischer Sprache. Dieses Projekt ist auch ein Testballon für KI-unterstützte Softwareentwicklung, wobei die "Zusammenarbeit" mit LLMs derzeit noch besser über englische Inhalte funktioniert.

Beitragen

Die Entwicklung des KERN Design-Systems ist im Hauptrepository organisiert.

Für Bugs und Verbesserungsvorschläge, die sich ausschließlich auf den CSS/HTML-Code beziehen, schaue dir bitte unsere Contributing Guidelines an. Wir freuen uns auf deinen Beitrag!

📚 Documentation

• Component Documentation - Detailed component APIs, properties, events, and examples
• Development & DevOps Guide - Development setup, build processes, testing, and deployment
• IntelliSense Setup Guide - Complete guide for setting up IDE support with autocompletion
• Live Storybook Demo - Interactive component playground
• KERN Design System - Official KERN design system documentation

🧠 IntelliSense Support

KERN Web Components provide full IntelliSense support for:

• ✅ HTML files - Component autocompletion and attribute suggestions
• ✅ TypeScript/JavaScript - Full type safety and autocompletion
• ✅ React/JSX - Component props and event handling
• ✅ Vue.js - Template syntax support
• ✅ VS Code - Custom HTML data for enhanced development experience

Quick Setup

// TypeScript - automatic IntelliSense
import '@kern-ux-annex/webc';

const button = document.querySelector('kern-button');
button.variant = 'primary'; // IntelliSense suggests available variants

<!-- HTML - with VS Code custom data -->
<kern-button variant="primary" size="lg">
  <!-- IntelliSense will suggest all available attributes -->
</kern-button>

For detailed setup instructions, see our IntelliSense Setup Guide.

Quick Contributing Guide

1. Fork the repository
2. Install dependencies: npm install
3. Start development: npm run dev
4. Make your changes following our guidelines
5. Run tests: npm test
6. Submit a pull request

For detailed contribution guidelines, see CONTRIBUTING.md.

🔗 Links & Resources

• KERN UX Website - Official KERN design system website
• Live Storybook - Interactive component demo
• GitLab Repository - Source code
• NPM Package - Package page

📄 License

EUPL-1.2 License - see LICENSE.md file for details

KERN ist ein Open-Source-Projekt, das von den Ländern Hamburg und Schleswig-Holstein initiiert wurde. Alle mit Interesse an der Digitalisierung der öffentlichen Verwaltung sind herzlich eingeladen, Teil der bundesweiten interdisziplinären Community zu werden.