Pure UI

A modular, vanilla JavaScript + CSS UI library with Angular-friendly integration helpers.

Version

v1.1.0

Repository

• npm: https://www.npmjs.com/package/ng-pure-ui
• Live Demo: https://pureui.netlify.app/
• Source: https://github.com/srivastavaanurag79/pure-ui
• Issues: https://github.com/srivastavaanurag79/pure-ui/issues

Installation

npm install ng-pure-ui

Angular Compatibility

• Angular 17+: standalone-first integration (recommended)
• Angular 16 and below: NgModule + APP_INITIALIZER integration (supported)

Quick Start (Vanilla)

<link rel="stylesheet" href="node_modules/ng-pure-ui/pure-ui.css" />
<script src="node_modules/ng-pure-ui/pure-ui.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    Pure.init();
  });
</script>

Angular 17+ Integration

1) Add styles and script in angular.json

{
  "styles": [
    "src/styles.css",
    "node_modules/ng-pure-ui/variables.css",
    "node_modules/ng-pure-ui/pure-ui.css"
  ],
  "scripts": ["node_modules/ng-pure-ui/pure-ui.js"]
}

2) Use the Angular adapter helpers

Create src/app/pure-ui.service.ts:

import { Injectable, NgZone } from "@angular/core";
import Pure from "ng-pure-ui";
import {
  initWithNgZone,
  destroyWithNgZone,
  observeWithNgZone,
} from "ng-pure-ui/angular";

@Injectable({ providedIn: "root" })
export class PureUIService {
  constructor(private zone: NgZone) {}

  init(container?: HTMLElement, options?: Parameters<typeof Pure.init>[1]) {
    initWithNgZone(this.zone, container, options);
  }

  destroy(container?: HTMLElement) {
    destroyWithNgZone(this.zone, container);
  }

  observe(container?: HTMLElement, options?: Parameters<typeof Pure.observe>[1]) {
    return observeWithNgZone(this.zone, container, options);
  }

  get api() {
    return Pure;
  }
}

3) Initialize once (standalone bootstrap)

import { APP_INITIALIZER, ApplicationConfig, inject } from "@angular/core";
import { PureUIService } from "./pure-ui.service";

function initPureUI() {
  const pure = inject(PureUIService);
  return () => pure.init(undefined, { initTheme: true });
}

export const appConfig: ApplicationConfig = {
  providers: [{ provide: APP_INITIALIZER, useFactory: initPureUI, multi: true }],
};

4) Re-init dynamic content (optional)

ngAfterViewInit() {
  this.pure.observe(this.el.nativeElement, {
    initOptions: { initTheme: false }
  });
}

Angular 16 and Below Integration (NgModule)

1) Install

npm install ng-pure-ui

2) Add styles and script in angular.json

{
  "styles": [
    "src/styles.css",
    "node_modules/ng-pure-ui/variables.css",
    "node_modules/ng-pure-ui/pure-ui.css"
  ],
  "scripts": ["node_modules/ng-pure-ui/pure-ui.js"]
}

3) Use the same adapter service

Create src/app/pure-ui.service.ts:

import { Injectable, NgZone } from "@angular/core";
import Pure from "ng-pure-ui";
import {
  initWithNgZone,
  destroyWithNgZone,
  observeWithNgZone,
} from "ng-pure-ui/angular";

@Injectable({ providedIn: "root" })
export class PureUIService {
  constructor(private zone: NgZone) {}

  init(container?: HTMLElement, options?: Parameters<typeof Pure.init>[1]) {
    initWithNgZone(this.zone, container, options);
  }

  destroy(container?: HTMLElement) {
    destroyWithNgZone(this.zone, container);
  }

  observe(container?: HTMLElement, options?: Parameters<typeof Pure.observe>[1]) {
    return observeWithNgZone(this.zone, container, options);
  }
}

4) Initialize in AppModule with APP_INITIALIZER

import { APP_INITIALIZER, NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { PureUIService } from "./pure-ui.service";

export function initPureUI(pure: PureUIService) {
  return () => pure.init(undefined, { initTheme: true });
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initPureUI,
      deps: [PureUIService],
      multi: true,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

New in v1.1

• Lifecycle hardening:
  • Pure.init(container?, options?)
  • Pure.destroy(container?)
  • Pure.observe(container?, options?)
• Command palette:
  • Pure.initCommandPalettes()
  • Pure.command.open(id?)
  • Pure.command.close(id?)
• Angular adapter subpath:
  • ng-pure-ui/angular
• Responsive updates across dropdowns, modals, calendar popups, tables, navbar/sidebar, tabs, tooltip/popover, alerts, and forms.
• New components:
  • Command Palette (command-palette.css)
  • Empty State (empty-state.css)
  • Stats Tiles (stats.css)
• Packaging improvements:
  • modern exports map
  • event-calendar.css included in build outputs
  • expanded pure-ui.d.ts

API Snapshot

Pure.init(container?, options?);
Pure.destroy(container?);
Pure.observe(container?, options?); // returns { disconnect() }

Pure.theme.update("light" | "dark");
Pure.theme.toggle();

Pure.command.open(id?);
Pure.command.close(id?);

Component Docs

All docs are in docs/:

• Grid
• Buttons
• Forms
• Cards
• Badges
• Alerts
• Tabs
• Accordion
• Modals
• Dropdown
• Navbar
• Table
• Calendar
• Event Calendar
• Pagination
• Progress
• Tooltip & Popover
• Typeahead
• Charts
• Currency
• Multi-select
• Drag & Drop
• Virtual Scroller
• Misc
• Command Palette
• Empty State
• Stats

Build, Test, Publish

npm run build
npm test
npm pack --dry-run

Package Exports

• ng-pure-ui -> core API (pure-ui.js) + types (pure-ui.d.ts)
• ng-pure-ui/angular -> Angular NgZone adapter helpers
• ng-pure-ui/styles.css -> master stylesheet alias
• ng-pure-ui/*.css -> component-level styles

License

ISC