GlassKit UI Framework

A modern glassmorphism design system built on top of Bootstrap 5, offering real-time CSS theme injection, responsive layout components, and dynamic JSON UI rendering.

Dynamic Theme Engine

Overrides Bootstrap variables in real time using runtime CSS Custom Property injection.

Glassmorphism Aesthetics

Translucent backdrops, hardware-accelerated blur filters, and reactive ambient orb lighting.

Mermaid Diagram Support

Integrated diagram rendering that automatically adapts SVG colors to active theme presets.

Flexible Distribution

Consumable via NPM package, zero-config CDN link, or dynamic JSON schema parser.

Dynamic Theme Engine Selector

Select a theme preset to observe how all UI components, grids, badges, and diagrams dynamically inherit theme color variables.

Grid System & Responsive Layouts

col-12 (100% Width)

col-md-6 (50% Width)

col-lg-4 (33% Width)

Interactive Runtime Console

[System] Interface rendered using native CSS custom properties.

[Success] Bootstrap 5 extension initialized clean.

Live Code Syntax Viewer

Stylesheet API

Real-time source code block rendering.

/* GlassKit Component Class Integration */
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
}

Dynamic Glass Alerts & Toast System

A standard glass alert with Primary theme variant. Colors automatically sync with active theme presets.

A standard glass alert with Success theme variant. Ideal for positive confirmation messages.

A standard glass alert with Danger theme variant. Suited for system errors and critical notifications.

Programmatic Floating Toast Alerts (JavaScript API)

Glass Buttons & Control Showcase

Controls

Disabled Button States

Extended Bootstrap 5 Glass Components

100% Bootstrap 5 Coverage

1. Breadcrumbs & Nav Pills

2. Progress Bars & Spinners

Loading UI modules...

3. Glass Accordion Panel

GlassKit applies translucent CSS backdrop styles over native Bootstrap 5 markup using standardized glass-* class names.

Yes. Calling themeManager.setTheme('cyberpunk') updates CSS variable tokens for colors, blur filters, and glow highlights in real time.

4. Glass Pagination Controls

Weekly Sales

$24,500

+15% vs last week

Active Users

1,250

Active Connections

System Health

99.9%

All Systems Operational

Glass Form Controls

Email Address

Select User Role

Sensitivity Range

Synchronization

Active State

Overlays, Tooltips, Offcanvas & Skeleton Loaders

Interactive Overlays

1. Tooltips, Popovers & Side Drawers

2. Skeleton Loading Placeholders

3. Glass Input Groups & Floating Labels

@

Floating Label Email

4. Form Validation Feedback States

Looks great! Input verified.

Please enter a valid format.

This is a translucent sliding side drawer panel powered by GlassKit backdrop blur.

Cart Item #1

GlassKit UI Enterprise License - $0.00

Module Status List

Bootstrap 5 Component Override
Completed
Responsive Sidebar & Workspace
Completed
JSON Schema Dynamic UI Renderer
Completed

GlassKit Integration & Architecture Guide

Learn how to integrate, structure, and programmatically control high-performance translucent interfaces using GlassKit architecture and CSS variable injection.

1. Icon Integration Guide (Bootstrap Icons & Custom SVG)

GlassKit is fully compatible with Bootstrap Icons and custom vector SVG graphics. Icons automatically inherit CSS color tokens, font sizing, and text opacity from parent Glass containers.

Standard Bootstrap Icon Markup

<!-- Standard Bootstrap Icon integration -->
<i class="bi bi-shield-check text-success fs-4 me-2"></i>
<button class="btn glass-btn glass-btn-primary">
    <i class="bi bi-download me-2"></i> Download Bundle
</button>

Inline SVG Icon Integration

<!-- SVG vector icon with GlassKit color fill -->
<svg class="glass-icon text-primary" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>

2. Theme Engine Architecture

The ThemeManager module dynamically overrides root CSS variables (--bs-primary, --bg-color, --gk-blur) at runtime.

Programmatic execution example:
themeManager.setTheme('cyberpunk');

Theme Switching Lifecycle Diagram

sequenceDiagram
    participant User as Developer / App UI
    participant TM as ThemeManager (JS)
    participant DOM as document.documentElement
    participant M as Mermaid.js Engine
    User->>TM: themeManager.setTheme('cyberpunk')
    activate TM
    TM->>DOM: Overrides --bs-primary, --bg-color, --gk-blur
    TM-->>M: Emits glasskit-theme-changed event
    activate M
    M-->>M: Re-renders SVG diagram colors dynamically
    deactivate M
    deactivate TM

3. Dynamic JSON UI Schema Engine

Powers low-code/no-code visual builders by parsing structured GlassNode trees directly into DOM elements:

import { renderFromJSON } from 'glasskit-ui';

const schema = {
  component: 'glass-card',
  props: { class: 'p-4', variant: 'primary' },
  children: [
    { component: 'h3', text: 'Dynamic Card Title' },
    { component: 'glass-btn', props: { variant: 'primary' }, text: 'Submit' }
  ]
};

renderFromJSON(schema, document.getElementById('app'));

4. Framework & React Integration

Import GlassKit styles and prop mappers natively in React / Next.js projects:

import 'glasskit-ui/style.css';
import { GlassKitReact, themeManager } from 'glasskit-ui';

export function AppCard() {
  return (
    <div {...GlassKitReact.card({ variant: 'primary', className: 'p-4' })}>
      <h4 className="text-white">React Glass Card</h4>
      <button {...GlassKitReact.button({ variant: 'primary' })}>Click Me</button>
    </div>
  );
}