Independent Front End UI Engine

Styles, components, and runtime. Built together.

Build with semantic utilities, shared design tokens, and reusable components. Add interaction with a lightweight JavaScript runtime, independent of your framework.

Use the CSS on its own, connect React when you need it, and compile your styles with the optional CLI.

Try the playground

npm install @hygular/core

Open source · MIT licensedToken-based themingDependency-free runtimeOptional React integration

Inside HygularBuilt around your markup.

Write the markup, choose the styles, and let the runtime handle supported interactions. Bring it into the stack you already use.

DOM-aware initialization

New markup. Same behavior.

Once initialized, Hygular detects supported components added to the DOM and prepares them as they approach the viewport. Content loaded later follows the same path as the initial page.

MarkupRuntime

<div data-hygular="tabview"> <!-- Tab controls and panels --> </div>

DOM changeViewport observationInitialized

A core that stands on its own.

The vanilla JavaScript runtime has no external dependencies. React integration is optional, and the CLI is a separate package.

package.json

"dependencies": {}

ES modulesType definitionsCDN ready

Behavior belongs with the component.

Component styles and JavaScript behavior are developed together, from opening a drawer to switching tabs and displaying a toast.

Your framework stays yours.

Use Hygular with plain HTML, server-rendered templates, or a JavaScript framework. Add React hooks where needed, and use the optional CLI to generate CSS from the classes in your project.

Import the CSS for styling. Add the runtime for interactive components. Use the separate CLI when you want to generate CSS from your project’s classes.

Install the core package with npm, or load a pinned version from a CDN.

Initialize the runtime in the browser, or use hooks for React integration.

NPMCDNReactCLI

npm install @hygular/core

main.js

import "@hygular/core/css"; import { Hygular } from "@hygular/core";

new Hygular();

Import CSS once. Initialize the runtime in your browser entry, after the page markup is available.

index.html

<!-- In <head> --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hygular/[email protected]/dist/css/hygular.min.css" /> <!-- Before </body> --> <script src="https://cdn.jsdelivr.net/npm/@hygular/[email protected]/dist/js/hygular.min.js"></script> <script> new Hygular(); </script>

Load the stylesheet in the head and the runtime after your markup. Both files use the same pinned beta version.

Range.tsx

"use client"; import { useRange } from "@hygular/core/react";

export function Range() { const range = useRange(); return (

<div ref={range.ref} className="group-range" data-hygular="range"> <input type="range" aria-label="Volume" className="form-range" defaultValue="50" /> </div> ); }

Import @hygular/core/css once in your app entry or root layout. The hook initializes the range and disposes it when the component unmounts.

npm install -D @hygular/[email protected]

The optional CLI generates CSS from the classes in your project. It is installed separately from the core package.

Thoughtful defaults at the CSS level. Practical tools for the way you ship.

Cascade control

Native CSS layers give your styles a clear order, from the foundation to your customizations.

Layers, in order

@layer theme, base, components, utilities, custom;

/* A place for every decision. */

Logical layouts

Spacing and alignment that follow the reading direction. One layout for LTR and RTL.

Lightning JIT compiler

Scan your templates and generate the styles your project uses, ready for production.

Build workflow

$ npx hygular build ./src

Scanning templates...

Generate used utilities

hygular.build.css

Hygular in use

Switch colors, compare reading directions, and try the form controls. These examples use Hygular’s CSS and React hooks.

Color utilities

OKLCH

Four palettes applied to the same markup, using color utilities.

Form validation

Floating labels and validation rules, with feedback alongside each field.

Validate inputsInteractive demo. Your input is not sent anywhere.

Layout in both directions

Logical spacing follows the reading direction. Compare the same dual-range control in left-to-right and right-to-left layouts.

Price rangeLTR

$200$800

Price rangeRTL

$200$800

Declarative interactions

Declare components with data attributes. Hygular handles the accordion transitions and dropdown behavior.

Explore componentsAccordionDocumentationPlayground

Visual builderDesign visually. Build with code.

Bring Hygular into a visual workflow with UnBondr. Compose pages, refine the details, and export React, Vue, or HTML. Design in Figma then Export as Hygular.

Multi-pageFully editableCode export

Start for freePricing

UnBondrVisual canvas

Home

Hero sectionYour ideas. Taking shape.

ReactVueHTMLIllustrative preview

Built with Hygular

Start from scratch, or make a template your own. Every component stays editable.

Agency

Free starter

A confident home for your work.

Explore template

Blog

Free starter

Make room for your next story.

Explore template

AI Chatbot

Premium

A focused space for conversation.

Explore template

Your next project starts here.

Scaffold a Hygular project with a single command. Choose a template, choose a framework, and start building.