Luminary UI

A classless, futuristic iOS 26-style Glassmorphism CSS Framework.

Documentation: LINK

Luminary UI styles raw semantic HTML elements automatically to create beautiful, frosted-glass interfaces with rich light-bending transparency layers out of the box.

Features

• Classless Reset: Styles raw HTML tags (<main>, <section>, <nav>, <button>, <input>) directly.
• Micro-Refractions: Built-in specular glares, organic border rings, and iOS spring-like transitions.
• Adaptive Dark Mode: Automatically updates styling based on the user's system preferences.
• Postprocessed for Compatibility: Auto-prefixed to ensure standard vendor filters (like -webkit-backdrop-filter) render seamlessly across Safari, Chrome, and Firefox.

Installation

Install the package via npm:

npm install luminary-ui

Getting Started

Simply import the compiled CSS file at the entry point of your application:

import 'luminary-ui/dist/luminary.css';

Basic HTML Structure Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Glassmorphic App</title>
  <link rel="stylesheet" href="node_modules/luminary-ui/dist/luminary.css">
</head>
<body>

  <!-- Automatically styled glass header -->
  <nav>
    <strong>AppTitle</strong>
    <ul>
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">Settings</a></li>
    </ul>
  </nav>

  <!-- Central frosted glass canvas -->
  <main>
    <h2>Dashboard</h2>
    <p>This layout card gets organic glass depth automatically.</p>
    
    <input type="text" placeholder="Enter key...">
    <button>Submit Action</button>
  </main>

</body>
</html>

Modifier Classes

Customize specific layers by adding modifier classes directly next to your base tags:

• .thin - Reduced backdrop-blur and higher transparency.
• .thick - Deep contrast blur for overlay modals/dialogs.
• .vibrant - System color overlay hues.
• .glow - Emits a soft, radial neon glow.