glasskit

GlassKit is a pure-CSS component library built around a glassmorphism aesthetic, which its README describes as inspired by Apple's iOS 26 "Liquid Glass" and visionOS design language. It targets apps and interfaces that should feel native and modern without pulling in a JavaScript framework or a build step. What ships in the repository - glasskit.css, the core library containing all components and design tokens - glasskit.min.css, a minified build generated on release - glasskit-styles.js, a Constructable Stylesheet for use inside Shadow DOM - theme-override.css, a template for custom brand themes that includes four example themes (Ocean Blue, Emerald Green, Rose, and an empty custom slot) - index.html, showcase.html and docs.html, plus German translations of those pages in a de/ folder - SKILL.md, a structured component reference aimed at LLMs and coding assistants - The project is MIT licensed and was developed by Jungherz GmbH. A public demo, documentation and showcase are hosted at glasskit.jungherz.com. Components and building blocks The README groups components into navigation and layout (background with an aurora gradient, nav bar, round pill icon button, fixed bottom tab bar, a floating pill-shaped tab bar variant with an optional accessory capsule, accordion, divider), content (title, card, a glow card variant, badge, avatar, status notice, and an iOS-style grouped list), actions and feedback (primary, secondary and tertiary buttons, modal with blur overlay, toast, anchored popover with fade and scale animation), and form elements (input, textarea, select, search field, iOS-style toggle, checkbox, radio, range slider and progress bar). In total the project describes itself as offering 24 components. Beyond components, the library provides utility classes with a separate gl- prefix for flex layout, spacing, text alignment and sizing, alongside the glass- prefixed component classes. Naming follows a BEM-like convention so the classes should not collide with existing stylesheets. Theming and design tokens Dark and light mode are both supported and switched by setting a data-theme attribute on the html element; a ready-made theme toggle component is included. Almost every visual value is exposed as a CSS custom property: primary and text colors, five glass surface gradations, three blur levels, radii for cards, buttons and inputs, a spacing scale, and shadow and inset tokens. Custom branding is done by declaring --gl-color-primary and its dark variant; from version 1.11.0 the gradient midpoint, focus ring, button glow and range thumb are derived from those values. The README notes that the brand variables should be declared on :root because custom properties are substituted where they are declared. Web Components and Shadow DOM Because external stylesheets do not cross a shadow boundary, the library exports an ES module providing glassSheet, a shared CSSStyleSheet that can be assigned to adoptedStyleSheets, plus a css string export as a fallback. The README shows usage with a plain custom element, with Hybrids.js and with Lit, and points out that --gl-* custom properties and theme switching still work across shadow roots. Installation and compatibility GlassKit can be loaded from jsDelivr or unpkg via a link tag, installed from npm as @jungherz-de/glasskit and imported from CSS or JavaScript, or downloaded directly from GitHub releases. The README states a footprint of 51 KB raw, 39 KB minified and 6.5 KB gzipped with no external dependencies. The glass effect relies on backdrop-filter; the README lists full support in Safari, Chrome/Edge and Samsung Internet, and support in Firefox from version 103, noting that without backdrop-filter the interface remains usable with plain defined background colors. The library is presented as the CSS foundation of a three-part family: GlassKit Elements supplies vanilla JavaScript custom elements for app UIs, and GlassKit Web is an Astro website template with sections, i18n and SEO built on the same design language. Contributions are invited following the BEM-like naming, existing design tokens, dark and light mode coverage, and touch targets of at least 44px.