GlassKit UI

GlassKit is a premium, modern glassmorphism UI extension designed to sit seamlessly on top of Bootstrap 5 (or standard HTML/CSS).

It empowers both human developers and AI agents to create stunning, translucent, dynamic web interfaces instantly by simply adding intuitive glass-* classes onto standard Bootstrap elements.

---

AI Agent & Developer Quickstart

To build any page using GlassKit:

1. Include Bootstrap 5 CSS and GlassKit CSS (glasskit-ui.css).
2. Add glass-* classes to your Bootstrap elements.

<!-- 1. Include Bootstrap & GlassKit -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="path/to/dist/glasskit-ui.css">
<script src="path/to/dist/glasskit-ui.umd.js"></script>

---

Component Cheatsheet (glass-*)

Bootstrap Component	GlassKit Class	Description
Card / Container	.glass-card / .glass-container	Translucent card with backdrop blur & reflection
Button	.glass-btn	Glass button base style
Button Variants	.glass-btn-primary, .glass-btn-danger, .glass-btn-ghost, .glass-btn-outline	Glassmorphic themed buttons
Input / Select	.glass-input, .glass-select, .glass-textarea	Translucent form controls with glowing focus
Checkbox / Radio	.glass-check	Glass form check controls
Navbar	.glass-navbar / .glass-nav	Floating glass header navigation
Modal	.glass-modal	Translucent modal content dialog
Dropdown	.glass-dropdown	Glass dropdown menu container
Table	.glass-table	Glass table header and translucent rows
Badge	.glass-badge / .badge-glass	Glowing translucent tag
Alert	.glass-alert	Translucent alert banner
Accordion	.glass-accordion, .glass-accordion-button	Collapsible glass panels
Tabs / Pills	.glass-nav-pills, .glass-nav-tabs, .glass-nav-link	Translucent navigation tabs & pills
Pagination	.glass-pagination, .glass-page-link	Glass numeric pagination buttons
Progress & Spinner	.glass-progress, .glass-progress-bar, .glass-spinner	Neon gradient progress bars & loading wheels
Tooltip & Popover	.glass-tooltip, .glass-popover	Translucent floating tooltips & popovers
Offcanvas	.glass-offcanvas	Glass sliding drawer panel
Breadcrumb	.glass-breadcrumb, .glass-breadcrumb-item	Translucent breadcrumb navigation path

---

Ready-to-Use HTML Snippets

1. Glass Card

<div class="card glass-card p-4">
  <h4 class="fw-bold text-white">Glass Card Title</h4>
  <p class="text-white text-opacity-75">This is a glassmorphic card on top of Bootstrap.</p>
  <button class="btn glass-btn glass-btn-primary">Action</button>
</div>

2. Glass Buttons

<button class="btn glass-btn glass-btn-primary">Primary</button>
<button class="btn glass-btn glass-btn-danger">Danger</button>
<button class="btn glass-btn glass-btn-ghost">Ghost</button>
<button class="btn glass-btn glass-btn-outline">Outline</button>

3. Glass Form Input & Select

<div class="mb-3">
  <label class="form-label text-white">Email Address</label>
  <input type="email" class="form-control glass-input" placeholder="name@example.com">
</div>

<div class="mb-3">
  <label class="form-label text-white">Select Option</label>
  <select class="form-select glass-select">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
</div>

4. Glass Navbar

<nav class="navbar glass-navbar px-4 py-3">
  <a class="navbar-brand text-white fw-bold" href="#">My Glass App</a>
  <div class="d-flex gap-2">
    <button class="btn glass-btn glass-btn-ghost">Login</button>
    <button class="btn glass-btn glass-btn-primary">Register</button>
  </div>
</nav>

5. Glass Modal

<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content glass-modal p-3">
      <div class="modal-header border-0">
        <h5 class="modal-title text-white">Glass Modal</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body text-white">
        Content inside glass modal...
      </div>
      <div class="modal-footer border-0">
        <button type="button" class="btn glass-btn glass-btn-ghost" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn glass-btn glass-btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

---

Theme Engine (JavaScript API)

Switch global themes in real-time with one line of JavaScript:

// Available themes: 'default', 'cyberpunk', 'nature', 'ubuntu', 'nothing'
window.GlassKit.themeManager.setTheme('cyberpunk');

Or trigger glass alerts:

window.GlassKit.showGlassAlert('Welcome to GlassKit!', 'success');

---

Development & Building

# Start dev server
npm run dev

# Build for distribution (outputs to dist/ directory)
npm run build

# Preview production build
npm run preview

License

MIT License