WinUI3 Kit

A lightweight Windows‑style UI framework for the web. better making windows like apps with it!!!

📦 CDN Script

Include this script in any HTML file to enable WinUI3 components (tip: put it on the bottom of your html or your just saying for it to hide everything in your windows):

<script src="https://alaricholt677.github.io/PKGS/winui3/winui3-kit.js"></script>

🚀 Quick Start

Here’s the smallest possible WinUI3‑Kit app for noobys and bigginers:

<!DOCTYPE html>
<html>
<body>

<script src="https://alaricholt677.github.io/PKGS/winui3/winui3-kit.js"></script>

<windows-options theme="light" mica="on" accent="blue"></windows-options>

<win-window title="Hello" left="120px" top="80px">
    <h2>Welcome to WinUI3 Kit</h2>
    <p>This window is powered by the public CDN.</p>
</win-window>

</body>
</html>

🧪 Live Demo

This demo runs directly from the CDN:

demo icon

WinUI3 Kit Demo with icons

This is running directly from the CDN.

Cool!

📘 How to Code with WinUI3‑Kit

1. Theme Options

<windows-options theme="light" mica="on" accent="blue"></windows-options>

2. Windows

<win-window title="My App" left="100px" top="100px">
    <h2>Window Content</h2>
    <p>Anything can go inside a window.</p>
</win-window>

3. Buttons

<win-button>Normal</win-button>
<win-button primary>Primary</win-button>

4. Textboxes

<win-textbox placeholder="Enter text"></win-textbox>

5. Checkboxes

<win-checkbox label="Enable feature"></win-checkbox>

6. Toggles

<win-toggle label="Dark mode"></win-toggle>

7. Navigation

<win-nav>
    <win-nav-item label="Home"></win-nav-item>
    <win-nav-item label="Settings"></win-nav-item>
</win-nav>

8. Icons

<windows-icon type="settings"></windows-icon>
<windows-icon type="folder"></windows-icon>
<windows-icon type="wifi"></windows-icon>

9. Full Example

<windows-options theme="light" mica="on" accent="blue"></windows-options>

<win-window title="Example App" left="100px" top="100px">
    <h2><windows-icon type="home"></windows-icon> Welcome</h2>

    <win-textbox placeholder="Your name"></win-textbox>

    <br><br>

    <win-checkbox label="Enable notifications"></win-checkbox>

    <br><br>

    <win-toggle label="Dark mode"></win-toggle>

    <br><br>

    <win-button primary>
        <windows-icon type="check"></windows-icon>
        Submit
    </win-button>
</win-window>

and there are MORE ICONS like:

        arrow_down
        arrow_left
        arrow_right
        arrow_up
        battery
        bluetooth
        camera
        calendar
        check
        clock
        close
        download
        edit
        file
        folder
        folder_open
        home
        image
        info
        lock
        menu
        more
        pause
        person
        pin
        play
        refresh
        save
        search
        settings
        share
        stop
        trash
        unpin
        unlock
        upload
        video
        volume
        volume_mute
        wifi

Icons In Action:

tired of having lightning bright ui or boring colors like blue or hate or like the mica!

tired of burning your retinas or want to change your color

or you wan to change your mica on or off

well we got just the thing for you

you can switch out:

the mica option in "" metadata 
            <windows-options theme="dark" mica="here you put on or off to toggle it" accent="blue">
in the last code you can even change theme="" from dark to light or light to dark if you do or not like burning your retinas
same in the code at the start but for accent="" you can enter any of the following: blue, purple, red, orange, yellow, green, or pink

📁 Files in This Package

HIGHLY OPTIMIZED!!

speaking of options and files depending on your options in <windows-options></windows-options> your all set of optimized code injection because for the stylesheets inserted depending on your options it will only inject the needed code for your options ao you can make high performance free windows like apps on an html file with no struggle, if your using this, your asking for a no stress no bloat css coding experience and even better, higher performance!!! So make any sorts of apps and we got you!!!