npm install oge-ui

One install, one import path:

import { OgeGrid, OgeColumn, OgeSelectBox, OgeTagBox, OgeButton } from 'oge-ui';

What's inside

| Component family | Highlights | Docs | | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | | Data Grid (@oge-ui/grid) | Row + column virtualization into the millions, sorting, filtering, grouping, editing, master-detail, remote data, CSV/Excel/PDF export | demos | | Tree List (@oge-ui/tree-list) | The grid feature set on hierarchical data: lazy loading, tri-state selection, drag & drop | demos | | Select Box & Tag Box (@oge-ui/inputs) | WAI-ARIA combobox family: search, grouping, custom values, avatars, multi-select chips, autocomplete | demos | | Inputs (@oge-ui/inputs) | TextBox, TextArea, NumberBox, CheckBox, Switch, RadioGroup, Calendar, DateBox, DateRangeBox — one field chrome, all three form systems | demos | | Buttons (@oge-ui/buttons) | Async actions with auto loading, click guards, hold-to-confirm, groups, split buttons | demos | | Overlay (@oge-ui/overlay) | Flip-aware anchored popups, menus, tooltips, context menus, modal dialogs, toasts | demos | | Core (@oge-ui/core) | Framework-free data engine: sorting/filtering/pivot/virtualization math | — |

Looking for the Pivot Grid? It lives in the separate, commercially licensed @oge-ui/pivot package (free for evaluation and development) and is installed on its own: npm install @oge-ui/pivot — demos.

Quick start

import { Component, signal } from '@angular/core';
import { OgeColumn, OgeGrid, OgeTagBox } from 'oge-ui';

@Component({
  selector: 'app-orders',
  imports: [OgeGrid, OgeColumn, OgeTagBox],
  template: `
    <oge-tag-box label="Regions" [items]="regions" [searchEnabled]="true" [(value)]="selected" />

    <oge-grid [data]="orders()" keyField="id" [filterRow]="true">
      <oge-column field="product" caption="Product" />
      <oge-column field="amount" caption="Amount" dataType="number" />
    </oge-grid>
  `,
})
export class Orders {
  readonly regions = ['EMEA', 'APAC', 'Americas'];
  readonly selected = signal<readonly unknown[]>(['EMEA']);
  readonly orders = signal([{ id: 1, product: 'Aurora Display', amount: 1249 }]);
}

No modules, no forms boilerplate — [(value)] binds straight to a signal(); the same editors also plug into Signal Forms ([formField]) and reactive forms (formControl).

Why the umbrella?

• Zero decision fatigue — one npm install, every component importable from 'oge-ui'.
• Versions always in sync — the umbrella pins every @oge-ui/* package to the exact same release.
• Still tree-shakeable — everything is standalone ESM with sideEffects: false; unused components never reach your bundle.
• Not a lock-in — the scoped packages remain the canonical à-la-carte path (npm install @oge-ui/grid) when you want the smallest possible dependency tree.

Theming

One set of CSS design tokens drives every component:

:root {
  --oge-accent: #6366f1;
  --oge-radius: 8px;
}

Bundled bridges: dark (add .oge-theme-dark to any ancestor), Tailwind and Bootstrap — styling guide. All user-facing strings (aria labels included) are overridable via provideOge<X>Config() — localization guide.

Good to know

• Requires Angular ≥ 22 (standalone components, signals, zoneless).
• Excel/PDF export libraries (exceljs, jspdf) are optional peers: nothing is installed, bundled or executed unless you opt in.
• MIT licensed — and the umbrella and every package in it will stay MIT. The commercial @oge-ui/pivot package is not included. Source: github.com/oge-ui/oge-ui.

For AI coding assistants

The complete machine-readable API reference ships inside the package at node_modules/oge-ui/llms.txt — conventions, every documented member and copy-pasteable demos in one file. Online: https://ogeui.com/llms.txt (index) and https://ogeui.com/llms-full.txt (the whole suite).