Wilout UI - Documentation

Features

Zero Dependencies

Published artifacts are plain CSS and plain JS. No runtime libraries.

Framework Agnostic

Works with Angular, AngularJS, React, Vue, or vanilla HTML.

Design Tokens

Consistent theming via CSS custom properties. Easy customization.

TypeScript

Full type definitions included for better DX.

SSR Safe

No top-level window/document access. Safe for server rendering.

Accessible

Focus-visible, ARIA support, keyboard navigation built-in.

Installation

Step 1: Install packages

npm install @wilout/ui-css @wilout/ui-js

Step 2: Import CSS in styles.scss

@import '@wilout/ui-css/dist/ui.css';

Step 3: Initialize in AppComponent

import { Component, AfterViewInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`
})
export class AppComponent implements AfterViewInit, OnDestroy {
  ngAfterViewInit() {
    import('@wilout/ui-js').then(({ init }) => init());
  }

  ngOnDestroy() {
    import('@wilout/ui-js').then(({ destroy }) => destroy());
  }
}

Step 1: Include files in index.html

<link rel="stylesheet" href="node_modules/@wilout/ui-css/dist/ui.css">
<script src="node_modules/@wilout/ui-js/dist/index.umd.js"></script>

Step 2: Create a directive

angular.module('app', [])
  .directive('uiInit', function() {
    return {
      link: function(scope, element) {
        UI.init(element[0]);
        scope.$on('$destroy', function() {
          UI.destroy(element[0]);
        });
      }
    };
  });

Step 3: Use in templates

<div ui-init>
  <button class="ui-btn ui-btn--primary">Click me</button>
</div>

Step 1: Install packages

npm install @wilout/ui-css @wilout/ui-js

Step 2: Import CSS in App.tsx

import '@wilout/ui-css/dist/ui.css';

Step 3: Initialize with useEffect

import { useEffect, useRef } from 'react';
import { init, destroy } from '@wilout/ui-js';

function App() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (containerRef.current) {
      init(containerRef.current);
      return () => destroy(containerRef.current!);
    }
  }, []);

  return (
    <div ref={containerRef}>
      <button className="ui-btn ui-btn--primary">Click me</button>
    </div>
  );
}

Step 1: Install package

npm install @wilout/ui-rn

Step 2: Import tokens and styles

import { tokens, createStyles } from '@wilout/ui-rn';
import { StyleSheet } from 'react-native';

Step 3: Create styled components

const styles = StyleSheet.create({
  button: createStyles.button('primary'),
  buttonText: createStyles.buttonText('primary'),
});

function Button({ children }) {
  return (
    <TouchableOpacity style={styles.button}>
      <Text style={styles.buttonText}>{children}</Text>
    </TouchableOpacity>
  );
}

Note: DOM plugins are not available in React Native. Only tokens and style helpers are included.

Packages

Package	Description
`@wilout/ui-tokens`	Design tokens (CSS variables + JSON)
`@wilout/ui-css`	Component styles (buttons, forms, cards, etc.)
`@wilout/ui-js`	DOM plugins (collapse, tabs, dropdown, modal)
`@wilout/ui-react`	Optional React wrappers
`@wilout/ui-rn`	React Native tokens helper

Browser Support

Chrome/Edge (last 2 versions)
Firefox (last 2 versions)
Safari (last 2 versions)
No IE11 support