GlassKit Elements

Shadow DOM 29 Components Vanilla JS Form-Ready

Drop-in Web Components
for GlassKit CSS

Custom elements that wrap GlassKit's glassmorphism CSS into simple, declarative HTML tags – built by Jungherz GmbH. No frameworks needed, full control via Shadow DOM & Design Tokens.

Documentation Live Showcase GitHub

Simplify your markup

Before (raw CSS)

                <!-- 5 elements, 6 classes -->

                <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>

After (Web Component)

                <!-- 1 element, 0 classes -->

                <glk-toggle

                  label="Dark Mode"

                  checked>

                </glk-toggle>

Shadow DOM

Style encapsulation with adopted GlassKit stylesheets. Include one file – done.

Dark & Light

Both themes fully controlled via Design Tokens. Toggle a single attribute.

29 Components

From buttons to modals to tab bars – everything a modern app needs.

Themeable

Custom brand colors via theme-override.css – no changes to the core library needed.

Quick Start

          <!-- 1. Load GlassKit CSS -->

          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.11/glasskit.min.css">

          <!-- 2. Load GlassKit Elements -->

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

          <!-- 3. Use components -->

          <glk-button variant="primary">Click me</glk-button>