GlassKit Elements

v0.8.2
Demo Doku 🇬🇧 EN
Shadow DOM 24 Components Vanilla JS Form-Ready

Fertige Web Components
for GlassKit CSS

Custom Elements, die GlassKits Glassmorphism-CSS in einfache, deklarative HTML-Tags verpacken – entwickelt von Jungherz GmbH. Keine Frameworks nötig, volle Kontrolle über Shadow DOM & Design Tokens.

Dokumentation Live Showcase GitHub

Vereinfache dein Markup

Vorher (reines CSS)

<!-- 5 Elemente, 6 Klassen -->
<label class="glass-toggle">
  <input class="glass-toggle__input"
    type="checkbox">
  <span class="glass-toggle__track">
    <span class="glass-toggle__thumb"></span>
  </span>
  <span class="glass-toggle__label">
    Dark Mode
  </span>
</label>

Nachher (Web Component)

<!-- 1 Element, 0 Klassen -->

<glk-toggle
  label="Dark Mode"
  checked>
</glk-toggle>

Shadow DOM

Style-Kapselung mit adoptierten GlassKit-Stylesheets. Eine Datei einbinden – fertig.

Dark & Light

Beide Themes vollständig über Design Tokens gesteuert. Ein einziges Attribut umschalten.

24 Komponenten

Von Buttons über Modals bis zu Tab-Leisten – alles, was eine moderne App braucht.

Anpassbar

Eigene Markenfarben über theme-override.css – keine Änderungen an der Kernbibliothek nötig.

Schnellstart

<!-- 1. GlassKit CSS laden -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.3/glasskit.min.css">

<!-- 2. GlassKit Elements laden -->
<script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>

<!-- 3. Komponenten verwenden -->
<glk-button variant="primary">Klick mich</glk-button>