GlassKit Elements

Shadow DOM 29 Komponenten Vanilla JS Form-Ready

Fertige Web Components
für 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.

29 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.11/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>