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

No build step required. Add a single <link> tag and start using Wilout UI components immediately.

Quick start

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://brandbook.prod.wilout-internal.com/cdn/ui.min.css">
</head>
<body>
  <div class="ui-container">
    <h1>Hello Wilout UI</h1>
    <button class="ui-btn ui-btn--primary">Click me</button>
  </div>
</body>
</html>

Available files

File	Description
`cdn/tokens.css`	Design tokens only (CSS custom properties). Use when you only need variables.
`cdn/ui.css`	Full bundle: tokens + all component styles.
`cdn/ui.min.css`	Minified full bundle. Recommended for production.

Mirrors

<!-- Primary (Kubernetes) -->
<link rel="stylesheet" href="https://brandbook.prod.wilout-internal.com/cdn/ui.min.css">

<!-- Mirror (GitLab Pages) -->
<link rel="stylesheet" href="https://wilout.gitlab.io/wilout-ui/cdn/ui.min.css">

Note: The CDN delivers CSS only. For interactive components (collapse, dropdown, modal, tabs), add the JS plugin via npm or a <script> tag.

Step 1: Install packages

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

Step 2: Import CSS in styles.scss

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

Step 3: Use directives in your components

import { Component } from '@angular/core';
import { UiCollapseDirective, UiDropdownDirective } from '@wilout/ui-angular';

@Component({
  standalone: true,
  imports: [UiCollapseDirective, UiDropdownDirective],
  template: `
    <!-- Collapse with Signal state -->
    <button uiCollapse [uiCollapseTarget]="'#content'"
            #collapse="uiCollapse">
      {{ collapse.isOpen() ? 'Close' : 'Open' }}
    </button>
    <div id="content" class="ui-collapse">Hidden content</div>

    <!-- Dropdown -->
    <div class="ui-dropdown">
      <button uiDropdown (uiDropdownShown)="onOpen()">Menu</button>
      <div class="ui-dropdown__menu">...</div>
    </div>
  `
})
export class MyComponent {
  onOpen() { console.log('Dropdown opened'); }
}

Alternative: Programmatic control

import { WiloutUiService } from '@wilout/ui-angular';

export class MyComponent {
  private uiService = inject(WiloutUiService);

  openModal() {
    this.uiService.showModal('#myModal');
  }
}

Step 1: Install packages

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

Step 2: Import CSS

<link rel="stylesheet" href="node_modules/@wilout/ui-css/dist/ui.css">

Step 3: Add module dependency

angular.module('myApp', ['wilout.ui'])
  .controller('MyCtrl', function(wiloutUi, $scope) {
    // Initialize plugins
    wiloutUi.init();

    // Callbacks for directives
    $scope.onCollapsed = function() {
      console.log('Collapsed!');
    };
  });

Step 4: Use directives in templates

<!-- Collapse with state tracking -->
<button ui-collapse ui-collapse-target="#content"
        on-collapse-shown="onShown()">
  {{ collapseCtrl.isOpen ? 'Close' : 'Open' }}
</button>
<div id="content" class="ui-collapse">Hidden content</div>

<!-- Dropdown -->
<div class="ui-dropdown">
  <button ui-dropdown on-dropdown-shown="onOpen()">
    {{ dropdownCtrl.isOpen ? 'Close' : 'Menu' }}
  </button>
  <div class="ui-dropdown__menu">...</div>
</div>

<!-- Modal -->
<button ui-modal-trigger="#myModal">Open Modal</button>
<div id="myModal" class="ui-modal" ui-modal
     on-modal-hidden="onClosed()">...</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-angular`	Angular 17+ standalone directives and services
`@wilout/ui-angularjs`	AngularJS 1.x directives and services
`@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