DEV Community

Nathan C.
Nathan C.

Posted on

Stop Rewriting UI Components for Every Project

#frontend #javascript #showdev #webdev

Ever started a new project and found yourself rebuilding the same modal, dropdown, toast notification, tabs, and switches for the 20th time?

I got tired of that.

So I built UltraHTML, a lightweight UI library that gives you modern components with simple HTML and JavaScript, no framework required.

Getting Started

Include the CSS and JS files:

<link rel="stylesheet" href="dist/ultra.css">
<script src="dist/ultra.js"></script>
Enter fullscreen mode Exit fullscreen mode

Initialize UltraHTML:

Ultra.init();
Enter fullscreen mode Exit fullscreen mode

Done.

Buttons

UltraHTML includes two button styles out of the box:

  • ultra-button — a clean, modern button.
  • ultra-button-wave — adds a wave/ripple-style interaction effect.

Basic button:

<button class="ultra-button">
  Simple Button
</button>
Enter fullscreen mode Exit fullscreen mode

Wave button:

<button class="ultra-button ultra-button-wave">
  Wave Button
</button>
Enter fullscreen mode Exit fullscreen mode

Buttons use UltraHTML's default green theme, but because they're standard HTML elements, you can easily customize them with CSS.

For example, here's a red button that displays a popup message:

<button
  onclick="Ultra.popupmsg('Hello from UltraHTML!')"
  class="ultra-button ultra-button-wave"
  style="background-color: red">
  Show Popup
</button>
Enter fullscreen mode Exit fullscreen mode

You can create buttons that match your site's branding without learning a separate theming system:

<button class="ultra-button" style="background-color: #3b82f6;">
  Blue Button
</button>

<button class="ultra-button ultra-button-wave" style="background-color: #f59e0b;">
  Orange Button
</button>

<button class="ultra-button ultra-button-wave" style="background-color: #ef4444;">
  Red Button
</button>
Enter fullscreen mode Exit fullscreen mode

UltraHTML handles the styling and interactions while still giving you full control over how your buttons look.

Modal Example

Need to display important information?

<script>
window.addEventListener("load", () => {
    Ultra.init();

    Ultra.modal({
        head: "Important",
        text: "You need to reset your password",
        buttonText: "Reset",
        buttonAction: (modal) => {
            console.log("Going to reset page...");
            modal.remove();
        }
    });
});
</script>
Enter fullscreen mode Exit fullscreen mode

If buttonAction is omitted, the modal automatically closes when the button is clicked.

For simple informational dialogs, you only need:

<script>
Ultra.modal({
    head: "Welcome",
    text: "Thanks for visiting!",
    buttonText: "OK"
});
</script>
Enter fullscreen mode Exit fullscreen mode

Add a buttonAction callback only when you need custom behavior, such as navigating to another page, submitting data, or running additional code before closing the modal.

Features:

  • Custom title
  • Custom text
  • Custom button labels
  • Automatic close behavior
  • Optional callback support
  • Clean styling out of the box

Popup Notifications 

<button onclick="Ultra.popupmsg('Hello from UltraHTML!')">
  Show Popup
</button>
Enter fullscreen mode Exit fullscreen mode

Instant toast-style messages with one line of code.

Dropdowns 

<div class="ultra-dropdown">
  <button class="ultra-dropdown-btn">
    Choose Option
  </button>

  <div class="ultra-dropdown-content">
    <a href="#">Action One</a>
    <a href="#">Action Two</a>
    <a href="#">Action Three</a>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Tabs 

<div class="ultra-tab-container">
  <div class="ultra-tab tab-active">Active Tab</div>
  <div class="ultra-tab">Inactive Tab</div>
  <div class="ultra-tab tab-disabled">Disabled Tab</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Chips 

<div class="ultra-chip">
  Clickable Chip
</div>

<div class="ultra-chip chip-permanent">
  Permanent Chip
</div>
Enter fullscreen mode Exit fullscreen mode

Image chips:

<div class="ultra-chip">
  <img src="https://picsum.photos/43/43">
  Image Chip
</div>
Enter fullscreen mode Exit fullscreen mode

Switches 

<label class="ultra-switch">
  <input type="checkbox" class="ultra-switch-input">
  <span class="ultra-switch-slider"></span>
</label>
Enter fullscreen mode Exit fullscreen mode

Custom Right-Click Menus 

<div class="ultra-context-menu">
  <div class="item">📝 Edit</div>
  <div class="item">❌ Delete</div>
  <div class="item">🔗 Copy Link</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Initialize once:

Ultra.init();
Enter fullscreen mode Exit fullscreen mode

and UltraHTML handles the rest.

Why I Built UltraHTML

Many UI libraries are powerful, but they're also huge, framework-dependent, or overkill for smaller projects.

UltraHTML focuses on:

  • Simplicity
  • Speed
  • Lightweight code
  • Modern styling
  • Framework independence

Sometimes you just want a modal without installing 50 packages.

What's Next?

I'm actively developing UltraHTML and adding new components.

GitHub: https://github.com/Natuworkguy/UltraHTML

I'd love feedback, feature requests, and contributions.

What component would you want to see added next?

Top comments (0)