vibe-ui-injector

v1.0.0

Published

22 days ago

Minimalist Glassmorphism/Neumorphism/Aurora/Clay Dynamic Injector

Downloads

123

0High
0Medium
0Low

dimzxzzx07

glassmorphism neumorphism aurora claymorphism ui design injector

Vibe UI Injector

What is Vibe UI Injector?

Vibe UI Injector is a lightweight, zero-dependency JavaScript library that transforms ordinary HTML elements into stunning modern UI components using only HTML attributes. Simply add data-ui to any element and watch the magic happen.

The library automatically scans your DOM, injects precise CSS calculations (backdrop-filter, multi-layered box-shadows, gradients), and ensures accessible text contrast. No CSS frameworks, no build steps, no complexity.

Features

| Category | Features | |----------|----------| | Glassmorphism | Frosted glass, crystal clear, milky white, dark glass, neon blur | | Neumorphism | Soft, deep, convex, concave, pill shape, card style, dark theme | | Aurora | Sunset, ocean, midnight, candy, forest, fire, galaxy, pastel gradients with animation | | Claymorphism | Soft clay, rounded, pressed, dark clay, playful, flat | | Dynamic Attributes | Custom blur radius, background colors, border radius, shadow intensity | | Auto Contrast | Automatic text color based on background brightness | | Zero Config | Works immediately after adding script tag | | Lightweight | ~8KB minified, zero dependencies | | Variants | 100+ pre-built beautiful combinations |

Quick Demo

Glassmorphism Card

<div data-ui="glass" data-glass-blur="12px" data-glass-bg="rgba(255,255,255,0.15)">
    <h3>Glass Card</h3>
    <p>This card has a beautiful frosted glass effect</p>
</div>

Neumorphism Button

<button data-ui="neumo" data-neumo-distance="8px" data-neumo-bg="#e0e0e0">
    Click Me
</button>

Aurora Gradient Box

<div data-ui="aurora" data-aurora-speed="6s">
    <h3>Living Gradient</h3>
    <p>Colors that move and flow</p>
</div>

Claymorphism Element

<div data-ui="clay" data-clay-bg="#f0e6d8">
    <h3>Soft Clay</h3>
    <p>3D effect that looks touchable</p>
</div>

Installation

Via CDN (jsDelivr)

<!-- Add this to your HTML <head> or before closing </body> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.global.js"></script>

Via CDN (unpkg)

<script src="https://unpkg.com/[email protected]/dist/index.global.js"></script>

Via NPM (for build tools)

npm install vibe-ui-injector

// For usage with module bundlers
import 'vibe-ui-injector';
// or
require('vibe-ui-injector');

Local Installation

git clone https://github.com/Dimzxzzx07/vibe-ui-injector.git
cd vibe-ui-injector
npm install
npm run build

Then copy dist/index.global.js to your project.

Quick Start

Step 1: Add the Script

<!DOCTYPE html>
<html>
<head>
    <title>My Awesome Project</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.global.js"></script>
</head>
<body>

    <!-- Your elements go here -->
    <div data-ui="glass">
        <h1>Hello World!</h1>
    </div>

</body>
</html>

Step 2: Add data-ui Attributes

<!-- Glassmorphism -->
<div data-ui="glass">Glass Card</div>

<!-- Neumorphism -->
<div data-ui="neumo">Neumo Card</div>

<!-- Aurora -->
<div data-ui="aurora">Aurora Box</div>

<!-- Claymorphism -->
<div data-ui="clay">Clay Box</div>

Step 3: Customize with Additional Attributes

<div data-ui="glass" 
     data-glass-blur="20px" 
     data-glass-bg="rgba(0,0,0,0.3)" 
     data-glass-radius="24px">
    Dark Glass Card
</div>

Complete Working Example

<!DOCTYPE html>
<html>
<head>
    <title>Vibe UI Injector Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.global.js"></script>
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: system-ui, -apple-system, sans-serif;
            margin: 0;
            padding: 20px;
        }
        .container {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
        }
        [data-ui] {
            padding: 30px;
            width: 250px;
            text-align: center;
            transition: transform 0.3s ease;
        }
        [data-ui]:hover {
            transform: translateY(-5px);
        }
        h3 {
            margin: 0 0 10px 0;
        }
        p {
            margin: 0;
            font-size: 14px;
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <div class="container">
        <div data-ui="glass" data-glass-blur="10px" data-glass-bg="rgba(255,255,255,0.2)">
            <h3>🌊 Glassmorphism</h3>
            <p>Frosted glass effect with blur</p>
        </div>

        <div data-ui="neumo" data-neumo-distance="8px" data-neumo-bg="#e0e0e0">
            <h3>⚡ Neumorphism</h3>
            <p>Soft extruded design</p>
        </div>

        <div data-ui="aurora" data-aurora-speed="8s">
            <h3>🌈 Aurora</h3>
            <p>Animated gradient flow</p>
        </div>

        <div data-ui="clay" data-clay-bg="#f0e6d8">
            <h3>🎨 Claymorphism</h3>
            <p>3D tactile design</p>
        </div>
    </div>
</body>
</html>

UI Types

Glassmorphism (data-ui="glass")

Modern frosted glass effect with backdrop blur.

Attributes:

Attribute Default Description data-glass-blur 10px Backdrop blur intensity data-glass-bg rgba(255,255,255,0.2) Background color with opacity data-glass-border 1px solid rgba(255,255,255,0.3) Border style data-glass-radius 16px Border radius data-glass-shadow 0 8px 32px rgba(0,0,0,0.1) Box shadow

Example:

<div data-ui="glass" 
     data-glass-blur="15px" 
     data-glass-bg="rgba(255,255,255,0.15)"
     data-glass-radius="20px">
    Frosted Card
</div>

Neumorphism (data-ui="neumo")

Soft UI design with extruded shadows.

Attributes:

Attribute Default Description data-neumo-distance 10px Shadow distance data-neumo-blur 20px Shadow blur radius data-neumo-intensity 0.1 Shadow intensity data-neumo-bg #e0e0e0 Background color data-neumo-radius 20px Border radius data-neumo-type concave convex or concave

Example:

<div data-ui="neumo" 
     data-neumo-distance="12px" 
     data-neumo-bg="#d4d4d4"
     data-neumo-type="convex">
    Convex Button
</div>

Aurora (data-ui="aurora")

Animated mesh gradient backgrounds.

Attributes:

Attribute Default Description data-aurora-speed 8s Animation speed data-aurora-colors #ff0080,#ff8c00,#40e0d0 Gradient colors data-aurora-radius 16px Border radius data-aurora-blur 0px Additional blur effect

Example:

<div data-ui="aurora" 
     data-aurora-speed="6s" 
     data-aurora-colors="#ff6b6b,#feca57,#48dbfb"
     data-aurora-radius="30px">
    Rainbow Aurora
</div>

Claymorphism (data-ui="clay")

3D clay-like tactile design.

Attributes:

Attribute Default Description data-clay-bg #f8e5d6 Background color data-clay-radius 40px 40px 60px 60px Border radius data-clay-inset 8px Inset shadow intensity

Example:

<div data-ui="clay" 
     data-clay-bg="#f5e6d3" 
     data-clay-radius="50px"
     data-clay-inset="10px">
    Squishy Clay Card
</div>

Variant Library

Instead of customizing attributes, use pre-built named variants for instant beautiful results.

Glassmorphism Variants

Variant Description glass_frosted Heavy frosted glass effect glass_crystal Clear, minimal glass glass_milky Opaque milky glass glass_dark Dark theme glass glass_neon Cyan neon glow glass glass_red Red tinted glass glass_blue Blue tinted glass glass_green Green tinted glass glass_purple Purple tinted glass glass_orange Orange tinted glass

Usage:

<div data-ui="glass_frosted">Frosted Glass</div>
<div data-ui="glass_crystal">Crystal Clear</div>
<div data-ui="glass_dark">Dark Glass</div>

Neumorphism Variants

Variant Description neumo_soft Soft gentle neumorphism neumo_deep Deep pronounced shadows neumo_white White neumorphism card neumo_dark Dark theme neumorphism neumo_convex Raised convex effect neumo_concave Pressed concave effect neumo_pill Pill-shaped rounded design neumo_card Large card-style neumorphism

Usage:

<div data-ui="neumo_soft">Soft Neumo</div>
<div data-ui="neumo_dark">Dark Neumo</div>
<div data-ui="neumo_pill">Pill Shape</div>

Aurora Variants

Variant Description aurora_sunset Warm sunset gradient aurora_ocean Cool ocean blues aurora_midnight Deep night purple aurora_candy Sweet pastel candy aurora_forest Fresh green forest aurora_fire Hot fire gradient aurora_galaxy Deep space colors aurora_pastel Soft pastel blend

Usage:

<div data-ui="aurora_sunset">Sunset Vibes</div>
<div data-ui="aurora_ocean">Ocean Waves</div>
<div data-ui="aurora_galaxy">Galaxy Space</div>

Claymorphism Variants

Variant Description clay_soft Soft gentle clay clay_rounded Fully rounded corners clay_pressed Pressed-in effect clay_dark Dark clay material clay_playful Playful organic shape clay_flat Flatter clay design

Usage:

<div data-ui="clay_soft">Soft Clay</div>
<div data-ui="clay_rounded">Rounded Clay</div>
<div data-ui="clay_playful">Playful Clay</div>

Additional Variants

Variant Description frosted Classic frosted glass crystal Ultra-clear crystal milky Opaque milky glass darkglass Dark mode glass neonblur Glowing neon blur softneumo Gentle neumorphism deepneumo Dramatic neumorphism

Usage:

<div data-ui="frosted">Frosted</div>
<div data-ui="neonblur">Neon Blur</div>
<div data-ui="softneumo">Soft Neumo</div>

Configuration Attributes

Global Attributes (apply to all UI types)

Attribute Description data-ui UI type: glass, neumo, aurora, clay, or variant name

Glassmorphism Attributes

Attribute Values Default data-glass-blur Any CSS blur value 10px data-glass-bg Any CSS color with opacity rgba(255,255,255,0.2) data-glass-border Any CSS border 1px solid rgba(255,255,255,0.3) data-glass-radius Any CSS length 16px data-glass-shadow Any CSS box-shadow 0 8px 32px rgba(0,0,0,0.1)

Neumorphism Attributes

Attribute Values Default data-neumo-distance Any CSS length 10px data-neumo-blur Any CSS length 20px data-neumo-intensity 0 to 1 0.1 data-neumo-bg Any CSS color #e0e0e0 data-neumo-radius Any CSS length 20px data-neumo-type convex, concave concave

Aurora Attributes

Attribute Values Default data-aurora-speed Any CSS time (s/ms) 8s data-aurora-colors Comma-separated CSS colors #ff0080,#ff8c00,#40e0d0 data-aurora-radius Any CSS length 16px data-aurora-blur Any CSS blur value 0px

Claymorphism Attributes

Attribute Values Default data-clay-bg Any CSS color #f8e5d6 data-clay-radius Any CSS border radius 40px 40px 60px 60px data-clay-inset Any CSS length 8px

API Reference

Global Object

window.vibeUI

Methods

Method Description vibeUI.injector.scan() Manually trigger DOM scan for new elements

Example:

// If you dynamically add elements after page load
const newElement = document.createElement('div');
newElement.setAttribute('data-ui', 'glass');
document.body.appendChild(newElement);
window.vibeUI.injector.scan(); // Re-scan to style new element

Usage Examples

Example 1: Modern Dashboard Cards

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.global.js"></script>
    <style>
        body {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            padding: 40px;
            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        }
        .dashboard {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
        }
        [data-ui] {
            padding: 25px;
            transition: all 0.3s ease;
        }
        [data-ui]:hover {
            transform: translateY(-5px);
        }
        .stat-number {
            font-size: 48px;
            font-weight: bold;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <div data-ui="glass_dark">
            <h3>📊 Total Users</h3>
            <div class="stat-number">12,847</div>
            <p>↑ 23% from last month</p>
        </div>

        <div data-ui="aurora_ocean">
            <h3>💾 Storage Used</h3>
            <div class="stat-number">843 GB</div>
            <p>of 1.2 TB</p>
        </div>

        <div data-ui="clay_soft">
            <h3>⚡ Active Sessions</h3>
            <div class="stat-number">2,341</div>
            <p>Currently online</p>
        </div>

        <div data-ui="neumo_soft">
            <h3>✅ Completion Rate</h3>
            <div class="stat-number">94.7%</div>
            <p>↑ 5.2% from last week</p>
        </div>
    </div>
</body>
</html>

Example 2: Interactive Button Set

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.global.js"></script>
    <style>
        body {
            background: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            font-family: system-ui, sans-serif;
        }
        .button-group {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
            padding: 40px;
        }
        [data-ui] {
            padding: 15px 30px;
            font-size: 18px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        [data-ui]:active {
            transform: scale(0.97);
        }
    </style>
</head>
<body>
    <div class="button-group">
        <button data-ui="glass">Glass Button</button>
        <button data-ui="neumo_convex">Neumo Button</button>
        <button data-ui="clay_rounded">Clay Button</button>
        <button data-ui="aurora_candy">Aurora Button</button>
        <button data-ui="glass_neon">Neon Button</button>
        <button data-ui="neumo_pill">Pill Button</button>
    </div>
</body>
</html>

Example 3: Hero Section with Multiple Effects

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.global.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: radial-gradient(circle at 20% 50%, #1a1a2e, #16213e);
        }
        .hero-content {
            max-width: 800px;
            padding: 50px;
            margin: 20px;
        }
        h1 {
            font-size: 64px;
            margin-bottom: 20px;
        }
        p {
            font-size: 20px;
            margin-bottom: 30px;
            line-height: 1.6;
        }
        .cta-group {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .cta-group [data-ui] {
            padding: 15px 35px;
            font-size: 18px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: transform 0.2s ease;
        }
        .cta-group [data-ui]:hover {
            transform: scale(1.05);
        }
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            max-width: 1200px;
            margin: 60px auto;
            padding: 20px;
        }
        .feature-card {
            padding: 30px;
            text-align: center;
        }
        .feature-card h3 {
            margin-bottom: 15px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div class="hero">
        <div data-ui="glass" data-glass-blur="15px" data-glass-bg="rgba(255,255,255,0.1)" class="hero-content">
            <h1>✨ Vibe UI Injector</h1>
            <p>Beautiful modern UI components with zero CSS. Just add data attributes and watch the magic happen.</p>
            <div class="cta-group">
                <button data-ui="aurora_fire">Get Started</button>
                <button data-ui="glass_neon">View Demo</button>
                <button data-ui="clay_soft">Documentation</button>
            </div>
        </div>

        <div class="feature-grid">
            <div data-ui="glass_frosted" class="feature-card">
                <h3>🎨 Glassmorphism</h3>
                <p>Frosted glass effects with backdrop blur</p>
            </div>
            <div data-ui="neumo_soft" class="feature-card">
                <h3>⚡ Neumorphism</h3>
                <p>Soft extruded 3D design</p>
            </div>
            <div data-ui="aurora_ocean" class="feature-card">
                <h3>🌈 Aurora Gradients</h3>
                <p>Animated flowing colors</p>
            </div>
            <div data-ui="clay_rounded" class="feature-card">
                <h3>🎯 Claymorphism</h3>
                <p>Tactile 3D material design</p>
            </div>
        </div>
    </div>
</body>
</html>

Example 4: Pricing Cards

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.global.js"></script>
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 50px;
            font-family: system-ui, sans-serif;
        }
        .pricing-container {
            display: flex;
            gap: 30px;
            justify-content: center;
            flex-wrap: wrap;
            max-width: 1200px;
            margin: 0 auto;
        }
        .pricing-card {
            flex: 1;
            min-width: 280px;
            padding: 35px;
            text-align: center;
        }
        .price {
            font-size: 48px;
            font-weight: bold;
            margin: 20px 0;
        }
        .price span {
            font-size: 20px;
        }
        .features {
            list-style: none;
            margin: 25px 0;
        }
        .features li {
            padding: 10px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .features li:last-child {
            border-bottom: none;
        }
        button {
            padding: 12px 30px;
            font-size: 16px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            margin-top: 20px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="pricing-container">
        <div data-ui="glass_frosted" class="pricing-card">
            <h3>Basic</h3>
            <div class="price">$9<span>/mo</span></div>
            <ul class="features">
                <li>10 Projects</li>
                <li>5GB Storage</li>
                <li>Basic Support</li>
            </ul>
            <button data-ui="neumo_soft">Choose Plan</button>
        </div>

        <div data-ui="aurora_candy" class="pricing-card">
            <h3>Pro</h3>
            <div class="price">$29<span>/mo</span></div>
            <ul class="features">
                <li>Unlimited Projects</li>
                <li>50GB Storage</li>
                <li>Priority Support</li>
                <li>Advanced Analytics</li>
            </ul>
            <button data-ui="clay_rounded">Choose Plan</button>
        </div>

        <div data-ui="glass_dark" class="pricing-card">
            <h3>Enterprise</h3>
            <div class="price">$99<span>/mo</span></div>
            <ul class="features">
                <li>Unlimited Everything</li>
                <li>1TB Storage</li>
                <li>24/7 Phone Support</li>
                <li>Custom Integration</li>
            </ul>
            <button data-ui="neumo_convex">Contact Sales</button>
        </div>
    </div>
</body>
</html>

Example 5: Dynamic Theme Switcher

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.global.js"></script>
    <style>
        body {
            transition: background 0.3s ease;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: system-ui, sans-serif;
        }
        .demo-box {
            padding: 60px;
            text-align: center;
            max-width: 500px;
            margin: 20px;
        }
        .button-group {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 30px;
        }
        button {
            padding: 10px 20px;
            font-size: 14px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body id="app">
    <div data-ui="glass" data-glass-blur="12px" class="demo-box">
        <h2>Dynamic Theme Demo</h2>
        <p id="currentTheme">Current: glass_default</p>
        <div class="button-group">
            <button onclick="changeTheme('glass')">Glass Default</button>
            <button onclick="changeTheme('glass_frosted')">Glass Frosted</button>
            <button onclick="changeTheme('neumo_soft')">Neumo Soft</button>
            <button onclick="changeTheme('aurora_ocean')">Aurora Ocean</button>
            <button onclick="changeTheme('clay_rounded')">Clay Rounded</button>
        </div>
    </div>

    <script>
        function changeTheme(theme) {
            const box = document.querySelector('.demo-box');
            box.setAttribute('data-ui', theme);
            document.getElementById('currentTheme').innerHTML = `Current: ${theme}`;
            window.vibeUI.injector.scan();
        }
    </script>
</body>
</html>

Browser Support

Browser Version Support Chrome 80+ ✅ Full Firefox 75+ ✅ Full Safari 14+ ✅ Full Edge 80+ ✅ Full Opera 67+ ✅ Full iOS Safari 14+ ✅ Full Android Chrome 80+ ✅ Full

Note: Backdrop-filter (Glassmorphism) requires modern browsers. Fallback styles are applied automatically.

FAQ

Q1: Does this library work with existing CSS?

Answer: Yes! Vibe UI Injector only adds styles to elements with data-ui attributes. It does not override or interfere with your existing CSS. Your custom styles, fonts, padding, and margins remain intact.

Q2: Can I use this with React/Vue/Angular?

Answer: Absolutely! The library works with any framework. Just add the script tag to your index.html, and any dynamically added elements with data-ui will be styled automatically. For dynamic content, call window.vibeUI.injector.scan() after adding new elements.

React example:

function GlassCard() {
    useEffect(() => {
        window.vibeUI?.injector.scan();
    }, []);
    return <div data-ui="glass">Hello React</div>;
}

Q3: How do I create custom colors?

Answer: Use the data attributes to customize any UI type:

<!-- Pink glass -->
<div data-ui="glass" data-glass-bg="rgba(255,192,203,0.2)">Pink Glass</div>

<!-- Blue neumorphism -->
<div data-ui="neumo" data-neumo-bg="#4a90e2">Blue Neumo</div>

<!-- Custom aurora -->
<div data-ui="aurora" data-aurora-colors="#ff0000,#00ff00,#0000ff">RGB Aurora</div>

Q4: Does it work on mobile devices?

Answer: Yes! All effects work on mobile devices with modern browsers. Backdrop-filter is supported on iOS 14+ and Android Chrome 80+. Touch interactions like hover effects work as expected.

Q5: How do I disable auto text contrast?

Answer: Auto contrast is built-in for accessibility. If you want to override it, simply add your own color:

<div data-ui="glass_dark" style="color: #ffcc00;">Custom gold text</div>

Q6: What's the performance impact?

Answer: Very minimal. The library only runs on initial page load and when new elements are added. It does not continuously poll or use expensive calculations. The total file size is ~8KB.

Q7: Can I use multiple UI types on one element?

Answer: No, each element can have only one data-ui value. But you can nest elements with different types:

<div data-ui="glass">
    <button data-ui="neumo">Nested Button</button>
</div>

Q8: How do I update an element's style dynamically?

Answer: Change the data-ui attribute and call scan():

const element = document.getElementById('myCard');
element.setAttribute('data-ui', 'aurora_ocean');
window.vibeUI.injector.scan();

Please read these Terms of Service carefully before using Vibe UI Injector.

Acceptance of Terms

By downloading, installing, or using Vibe UI Injector (the "Software"), you agree to be bound by these Terms of Service.

Intended Use

Vibe UI Injector is designed for legitimate purposes including:

· Building modern web interfaces for personal or commercial projects · Prototyping UI designs quickly · Educational purposes to understand modern CSS effects · Enhancing existing web applications with minimal effort

Prohibited Uses

You agree NOT to use Vibe UI Injector for:

· Creating malicious or deceptive interfaces · Bypassing accessibility standards intentionally · Any activity that violates local, state, or federal laws

Responsibility and Liability

THE AUTHOR PROVIDES THIS SOFTWARE "AS IS" WITHOUT WARRANTIES. YOU BEAR FULL RESPONSIBILITY FOR YOUR ACTIONS. THE AUTHOR IS NOT LIABLE FOR ANY DAMAGES, LEGAL CONSEQUENCES, OR ANY OTHER OUTCOMES RESULTING FROM YOUR USE.

No Warranty

Indemnification

You agree to indemnify and hold the Author harmless from any claims arising from your use of the Software.

License

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Vibe UI Injector

Table of Contents

What is Vibe UI Injector?

Features

Quick Demo

Glassmorphism Card