# OGE UI > UI component suite for data-heavy Angular and React applications: a virtualized Data Grid, Tree List, Pivot Grid, Charts, Scheduler, Gantt, Kanban, BPMN and rich-text editors, form editors and forms, upload, buttons, overlay surfaces, tabs, navigation and layout containers. One framework-free engine with two native render layers — Angular 22+ (signal APIs, standalone, zoneless) and React 18+ (`@oge-ui/react-*`) — and zero runtime dependencies. MIT licensed, except the Pivot, BPMN, Scheduler, Gantt, Kanban and Charts packages, which are commercial. Install with `npm i oge-ui` (every MIT family, one import path) or per family, e.g. `npm i @oge-ui/grid`. Requires Angular >= 22 and Node >= 22.22. Component styles ship inside the components, so no global stylesheet is required and the light theme is built in. App-wide defaults and every user-facing string come from `provideOgeConfig()`. React: `npm i @oge-ui/react` (every MIT family) or per family, e.g. `npm i @oge-ui/react-grid`; requires React >= 18, imports the package stylesheet once at the app entry and takes defaults from `ConfigProvider>`. The same docs URLs serve both frameworks — append `?framework=react` for the React view. For code generation, prefer the full reference — it inlines every API table and every demo source: [llms-full.txt](https://www.ogeui.com/llms-full.txt). Per-package references live at `https://www.ogeui.com/llms/.txt` and ship inside each tarball at `node_modules//llms.txt`. ## Packages - [@oge-ui/grid](https://www.ogeui.com/components/data-grid): Virtualized data grid: 100k+ rows, sorting, filtering, grouping with summaries, inline/batch/form editing, selection, master-detail, state persistence and CSV/Excel/PDF export. - [@oge-ui/tree-list](https://www.ogeui.com/components/tree-list): The data-grid feature set on hierarchical data: lazy loading, ancestor-preserving filtering, tri-state selection and drag & drop. - [@oge-ui/inputs](https://www.ogeui.com/components/inputs): Form editors on one field chrome: TextBox, TextArea, NumberBox, SelectBox, TagBox, Autocomplete, DateBox, ColorBox, CheckBox, Switch, and the APG Slider/RangeSlider with live drag commits and Escape-to-cancel — floating labels, validation, Signal Forms and reactive forms. - [@oge-ui/buttons](https://www.ogeui.com/components/buttons): Buttons with async actions and automatic loading, click guards, hold-to-confirm, auto-repeat, badges, stand-alone toggle buttons with `aria-pressed`, button groups, drop-down/split buttons, and (`@oge-ui/buttons/fab`) a floating action button pinned with safe-area insets plus a speed dial on the WAI-ARIA APG menu-button pattern. - [@oge-ui/overlay](https://www.ogeui.com/components/overlay): Popup foundation and surfaces: flip-aware anchored placement, WAI-ARIA menus with checkbox/radio/header rows, `oge-popover` with modal and non-modal modes, tooltips with rich templates and an arrow, context menus with selector delegation and an imperative `open(x, y)`, the `oge-modal` dialog with `OgeModalService` and its promise-based `confirm()` / `alert()` / `prompt()` helpers, the non-modal `oge-window`, the `oge-action-sheet` bottom sheet (a modal dialog holding an APG menu, swipe-down dismissal, a promise of the chosen action), and `OgeToastService` notifications. - [@oge-ui/tabs](https://www.ogeui.com/components/tabs): Tab strip and tab panel: declarative or data-driven tabs, deferred rendering with keep-alive, closable and reorderable tabs, router integration. - [@oge-ui/layout](https://www.ogeui.com/components/accordion): Layout containers and loading visuals — accordion panels with single or multiple expansion, a nested panel bar and a stand-alone expansion panel, a splitter with resizable, collapsible and nestable panes, a toolbar with an overflow menu, a card content surface with attribute-slot sections, and the loading trio: progress bar (buffer/chunked/severity), circular progress ring, load-indicator spinner, shimmer skeleton and a load panel that shades a busy container (`aria-busy`), with the aria progressbar contract done right — plus the display and feedback set: avatars (image → initials → icon fallback, presence dots) and avatar groups with "+N" overflow, count/dot badges whose description reaches the anchored control, selectable and removable chips with an APG listbox / grid chip list, inline alerts with a severity-derived `alert`/`status` role, ordered-list timelines (vertical, horizontal, alternating) and app bars with start/center/end sections, sticky/fixed placement and opt-in landmarks — plus the collection and dashboard set: an APG carousel (tab-list or button picker, scroll-snap swipes, loop, autoplay that stops on keyboard focus with a rotation control), a list view (virtualized listbox or list with sticky group headers, search, infinite scroll and swipe actions), a data view (templated items in container-query columns with sorting, search, paging and selection) and a tile layout (dashboard tiles with spans, drag to reorder, resize handles, Ctrl+Arrow keyboard twins and a validated serializable state). - [@oge-ui/forms](https://www.ogeui.com/components/forms): Form layout over the editors — responsive columns, fieldset groups, declarative validation rules and a validation summary. - [@oge-ui/upload](https://www.ogeui.com/components/upload): File uploader — drag & drop with directory and paste support, client-side restrictions, image previews, per-file progress, and chunked resumable transfer with pause, resume and retry. - [@oge-ui/editor](https://www.ogeui.com/components/editor): Rich-text editor — a dependency-free contenteditable editor over its own document model (no execCommand): headings, lists, quotes, code, links, images, colours, alignment, undo history, markdown shortcuts, Word / Google Docs paste cleanup and a strict allowlist HTML sanitizer. - [@oge-ui/ai](https://www.ogeui.com/components/ai): AI components that work with any model — a natural-language grid assistant that turns a sentence into validated sort, filter, grouping, search and column changes, and smart paste that fills a form from copied text, both with preview, apply and undo; transports for your own backend, OpenAI-compatible servers (OpenAI, Azure, Ollama, vLLM) and Anthropic. No hosted service, no row data sent. - [@oge-ui/navigation](https://www.ogeui.com/components/tree-view): Navigation controls — a tree view over flat or nested data with tri-state checkboxes, search, lazy load on demand, virtual scrolling, load-more paging, F2 label editing and drag & drop within and between trees, a drawer with built-in navigation items and touch swipe whose modality follows its layout mode (dialog when it covers the content, landmark when it shares the row), a WAI-ARIA APG menubar with nested submenus, checkbox/radio rows and a More-item or container-width hamburger overflow, an APG breadcrumb whose oldest middle crumbs collapse into an ellipsis menu against the container width while staying reachable as links, and a standalone pagination bar with a constant-width ellipsis page window, page-size selector, info range and adaptive compact mode. - [@oge-ui/pivot](https://www.ogeui.com/components/pivot-grid): Cross-tab analytics: rows × columns × measures, grand totals, field chooser, sorting and Excel export. **Commercial licence.** - [@oge-ui/bpmn](https://www.ogeui.com/components/bpmn): From-scratch BPMN 2.0 modeler: its own dependency-free XML + diagram-interchange engine, orthogonal routing, snapping, undo/redo, bpmnlint-style validation with a problems panel, pluggable properties providers, custom palette / context-pad entries and renderers, element templates, editable Camunda / Zeebe extensions and event payloads, a keyboard-accessible SVG canvas and no third-party branding. **Commercial licence.** - [@oge-ui/bpmn-engine](https://www.npmjs.com/package/@oge-ui/bpmn-engine): Framework-free engine of the BPMN editor (ADR 0003): the diagram model, BPMN XML + DI reader/writer, JSON envelope, SVG export, orthogonal routing, snapping, alignment, modeling rules, the snapshot command stack, the validation rules (`lintBpmnDiagram`), the properties-provider / element-template / Camunda + Zeebe helpers and the editor core both the Angular and the React editor run. Installed automatically by either editor — import it directly for server-side or test pipelines. **Commercial licence.** - [@oge-ui/charts](https://www.ogeui.com/components/charts): Charts: cartesian line/spline/area/bar/stacked/scatter/range/candlestick series, pie/doughnut and polar, circular and linear gauges, bullet charts, sparklines (own entry), funnel/pyramid, heatmap, treemap, sunburst, Sankey and a GeoJSON vector map on a dependency-free SVG kernel — time/log axes, zoom & pan, tooltips, drill-down and full keyboard access. **Commercial licence.** - [@oge-ui/charts-engine](https://www.npmjs.com/package/@oge-ui/charts-engine): Framework-free charts engine shared by the Angular and React charts: scales, series normalization, stacking, path builders with LTTB downsampling, pie and radar geometry, the cartesian/pie/polar/range-selector view models, the gauge, bullet, sparkline, funnel, heatmap, squarified treemap, sunburst, Sankey and GeoJSON map models with their colour scales, keyboard maps, the gesture machine, the message catalog and the image exporter. Installed automatically — you rarely import it directly. **Commercial licence.** - [@oge-ui/gantt](https://www.ogeui.com/components/gantt): Gantt chart: virtualized task tree pane + timeline chart, summary/milestone/baseline bars, FS/SS/FF/SF dependency arrows, critical path, drag editing with Escape-cancel and snapshot undo/redo. **Commercial licence.** - [@oge-ui/kanban](https://www.ogeui.com/components/kanban): Kanban board: columns + swimlanes over a plain card array with field mapping, WIP limits with drag previews, per-column virtualization, drag & drop with Escape-cancel, Ctrl+Arrow keyboard card moving with live announcements, built-in edit dialog, context menu and toolbar. **Commercial licence.** - [@oge-ui/kanban-engine](https://www.npmjs.com/package/@oge-ui/kanban-engine): Framework-free engine both Kanban render layers run: card normalization and write-back, swimlane grouping, search, drag hit-testing and auto-scroll, virtual windows, WIP arithmetic, keyboard and move machines, the edit-dialog model and the message catalog. Installed automatically with @oge-ui/kanban or @oge-ui/react-kanban. **Commercial licence.** - [@oge-ui/spreadsheet](https://www.ogeui.com/components/spreadsheet): Spreadsheet viewer that shows .xlsx workbooks the way Excel does: Excel-measured column widths, row heights, fonts, number formats, borders, fills, conditional formats, frozen panes, merges, pictures, notes and links, with the Excel selection, keyboard map, find, copy and status bar. Dependency-free xlsx reading in the browser; macros are kept and never run. **Commercial licence.** - [@oge-ui/spreadsheet-engine](https://www.npmjs.com/package/@oge-ui/spreadsheet-engine): Framework-free, DOM-free engine both spreadsheet render layers run (it also runs in Web Workers and Node): the workbook model, the dependency-free xlsx reader (ZIP, XML, styles, themes, shared and array formulas, notes, pictures), Excel number formats, Excel-measured font metrics and layout, the paint and render model, the viewer controller and the message catalog. Installed automatically with @oge-ui/spreadsheet or @oge-ui/react-spreadsheet. **Commercial licence.** - [@oge-ui/scheduler](https://www.ogeui.com/components/scheduler): Scheduler / event calendar: day, week and month views, all-day strip, pure-kernel overlap layout, drag & resize with Escape-cancel, appointment popup and form editing. **Commercial licence.** - [@oge-ui/core](https://www.ogeui.com/license): Framework-free data engine shared by every package: sort/filter/group/aggregate pipelines, selection and virtualization math, and the OGE UI Pro license check (`ogeSetLicenseKey`). Installed automatically — you rarely import it directly, except to register a Pro license key. - [@oge-ui/mcp](https://www.ogeui.com/getting-started/setup): Free MCP (Model Context Protocol) server for coding assistants — Claude Code, Cursor, Copilot, Windsurf, Zed: `claude mcp add oge-ui -- npx -y @oge-ui/mcp`. Bundles every package's llms.txt (offline, version-exact) behind four tools: list_packages, get_package_docs, search_docs and get_setup. Dependency-free Node over stdio. - [@oge-ui/locales](https://www.ogeui.com/getting-started/localization): Ready-made translations of every message catalog — German, French, Spanish, Italian, Brazilian Portuguese, Turkish, Japanese, Simplified Chinese, Arabic, Hebrew and Russian — as framework-free data, one entry point per language (`import { tr } from '@oge-ui/locales/tr'`). Applied with `provideOgeLocale(tr)` from `oge-ui` or `` from `@oge-ui/react`; commercial families take `ogeMergeMessages(OGE_DEFAULT__MESSAGES, tr.)` through their own provider. - [@oge-ui/react-buttons](https://www.ogeui.com/components/buttons): React buttons and button groups: severity/styling variants, async single-flight actions, click guarding, badges, hold-to-confirm, auto-repeat, stand-alone toggle buttons, a floating action button and an APG menu-button speed dial — running the same press machine, keyboard maps and stylesheet as the Angular package. - [@oge-ui/react-inputs](https://www.ogeui.com/components/inputs): React form editors on the same field chrome: TextBox, TextArea, NumberBox, SelectBox, TagBox, Autocomplete (virtual scrolling, custom values), CheckBox, Switch, RadioGroup, Slider/RangeSlider, ColorBox, Calendar and DateBox/DateRangeBox — running the same commit pipeline, list/selection machines and stylesheet as the Angular package. - [@oge-ui/react-tabs](https://www.ogeui.com/components/tabs): React tab strip and tab panel: the WAI-ARIA APG tabs pattern with declarative or data-driven tabs, automatic/manual activation, overflow scrolling with an all-tabs menu, closable tabs with async close guards, drag reordering and lazy panel rendering — running the same selection/close/reorder pipelines and the same stylesheet as the Angular tabs package. - [@oge-ui/react-layout](https://www.ogeui.com/components/accordion): React layout containers and loading visuals: card, accordion with async expand guards and lazy content, splitter with the APG window-splitter keyboard, toolbar with an overflow menu, a nested panel bar and a stand-alone expansion panel, plus the linear and circular progress bar, load indicator, shimmer skeleton and load panel, and the display and feedback set — avatar and avatar group, badge, chip and chip list, inline alert, timeline and app bar, the carousel, list view, data view and tile layout — running the same config defaults, decision functions and stylesheet as the Angular layout package. - [@oge-ui/react-navigation](https://www.ogeui.com/components/tree-view): React navigation and wayfinding: a virtualized tree view with lazy children, checkbox tri-state, load-more paging, label editing and drag & drop between trees, a drawer with overlay/push/side modes, derived modality, navigation items and touch swipe, a linear or free stepper with async step guards, a full WAI-ARIA menubar with submenus, type-ahead, checkbox/radio rows and More overflow, a collapsing breadcrumb and a pagination bar — running the same config defaults, decision functions and stylesheet as the Angular navigation package. - [@oge-ui/react-forms](https://www.ogeui.com/components/forms): React form layout over the editors: a nested layout array of items, groups and tabbed/accordion/wizard sections, responsive container-query columns, declarative validation rules and a validation summary — running the same item model, the same rule evaluator and the same stylesheet as the Angular forms package. - [@oge-ui/react-upload](https://www.ogeui.com/components/upload): React file upload: drag & drop with directory and paste support, client-side restrictions that stay on the row with their reason, image previews and a lightbox, per-file progress with rate and ETA, chunked resumable transfer with pause, resume and retry, a pluggable transport adapter, external drop zones and triggers — running the same upload engine, list machine and stylesheet as the Angular upload package. - [@oge-ui/react-editor](https://www.ogeui.com/components/editor): React rich-text editor: a dependency-free contenteditable editor over its own document model (no execCommand) with headings, lists, quotes, code, links, images, colours and alignment, its own undo history, markdown shortcuts, Word / Google Docs paste cleanup, a strict allowlist HTML sanitizer and an APG toolbar — running the same editor machine and stylesheet as the Angular editor package. - [@oge-ui/react-ai](https://www.ogeui.com/components/ai): React AI components that work with any model — turns a sentence into validated sort, filter, grouping, search and column changes on an , fills an from copied text, both with preview, apply and undo — running the same machines, transports and stylesheet as the Angular AI package. - [@oge-ui/react-kanban](https://www.ogeui.com/components/kanban): React Kanban board: columns + swimlanes over a plain card array with field mapping, WIP limits, per-column virtualization, drag & drop with Escape-cancel and edge auto-scroll, Ctrl+Arrow keyboard card moving with live announcements, cancelable CRUD and move callbacks, built-in edit dialog, context menu and toolbar — running the same engine and stylesheet as the Angular Kanban package. **Commercial licence.** - [@oge-ui/react-spreadsheet](https://www.ogeui.com/components/spreadsheet): React spreadsheet viewer that shows .xlsx workbooks the way Excel does: Excel-measured column widths, row heights, fonts, number formats, borders, fills, conditional formats, frozen panes, merges, pictures, notes and links, with the Excel selection, keyboard map, find, copy and status bar — running the same engine and stylesheet as the Angular spreadsheet. **Commercial licence.** - [@oge-ui/react-charts](https://www.ogeui.com/components/charts): React charts on a dependency-free SVG kernel: sixteen cartesian series types (line/spline/step/area/stacked/bar/range/scatter/bubble/candlestick), pie and doughnut, radar/polar, a range selector, circular and linear gauges, bullet charts, sparklines, funnel/pyramid, heatmap, treemap, sunburst, Sankey and a GeoJSON vector map — time and log axes, multiple value axes, strip lines, annotations, wheel/drag zoom and pan, crosshair, shared tooltips, an interactive legend, selection, keyboard point inspection and PNG/SVG export — running the same charts engine and stylesheet as the Angular charts package. **Commercial licence.** - [@oge-ui/react-grid](https://www.ogeui.com/components/data-grid): React data grid: data-driven columns with render props, multi-column sorting, a typed filter row with an operator menu, global search, paging, row and column virtualization, windowed remote loading, single/multiple/checkbox selection, Excel-like keyboard navigation, grouping with summaries and deferred groups, master-detail, row render props, row drag, pinned/resizable/reorderable columns, state persistence and CSV export — running the same framework-free grid engine, state slices and stylesheet as the Angular grid package. - [@oge-ui/react-tree-list](https://www.ogeui.com/components/tree-list): React tree list: the data-grid feature set on hierarchical data — flat parentId or nested payloads, lazy per-expansion loading with remote match discovery, ancestor-preserving filtering, recursive tri-state selection, paging over visible rows, virtualization, editing in all five modes and drag & drop reparenting — running the same framework-free tree engine, state slices and stylesheet as the Angular tree-list package. - [@oge-ui/react-bpmn](https://www.ogeui.com/components/bpmn): React BPMN 2.0 modeler: palette click-then-place and drag-to-canvas, context pad, inline label editing, orthogonal routing, snapping with guides, pools and lanes, boundary events and sub-processes, properties panel, minimap, element search, align/distribute, clipboard, snapshot undo/redo, BPMN XML + JSON + SVG + PNG export, live validation, properties providers, custom palette / context-pad entries and renderers, element templates and Camunda / Zeebe editing, and overlays on a keyboard-accessible canvas — running the same framework-free engine and editor core (`@oge-ui/bpmn-engine`) and the same stylesheet as the Angular editor. No third-party branding. **Commercial licence.** - [@oge-ui/react-overlay](https://www.ogeui.com/components/overlay): React overlay surfaces: viewport-aware anchored popups (flip + clamp, RTL-aware, shared Escape stack), a full WAI-ARIA menu with submenus and type-ahead, a popover, accessible tooltips with rich content, a right-click context menu with selector delegation, a modal dialog with async close guards, drag/resize, an imperative provider and confirm/alert/prompt helpers, a non-modal window, a mobile action sheet, and stacked toasts with pause-on-hover timers, coalescing and promise morphing — running the same machines and stylesheet as the Angular overlay package. - [@oge-ui/behavior](https://www.npmjs.com/package/@oge-ui/behavior): Framework-free interaction and accessibility layer shared by every package: popup positioning, focus trapping, the single overlay Escape stack, ref-counted body scroll locking and the one writing-direction helper every component resolves RTL through (`ogeIsRtl`, `ogeResolveDirection`, `observeDirection` — SSR-safe). Installed automatically — you rarely import it directly. - [@oge-ui/react](https://www.npmjs.com/package/@oge-ui/react): Re-exports every React family from a single import path, with one stylesheet for all of them. `npm i @oge-ui/react` then `import { OgeButton, OgeTextBox } from '@oge-ui/react'`. - [oge-ui](https://www.npmjs.com/package/oge-ui): Re-exports every MIT family from a single import path. `npm i oge-ui` then `import { OgeGrid, OgeButton } from 'oge-ui'`. - [@oge-ui/scheduler-engine](https://www.npmjs.com/package/@oge-ui/scheduler-engine): Framework-free engine behind both scheduler render layers (ADR 0003): view-model builders, the transitive-overlap column layout, lane packing, the RFC 5545 RRULE-subset parser and expander, gesture math, keyboard maps, the editing/recurrence/CRUD core (`OgeSchedulerCore`), default config and message catalog. Installed automatically with `@oge-ui/scheduler` or `@oge-ui/react-scheduler` — you rarely import it directly. **Commercial licence.** - [@oge-ui/react-scheduler](https://www.ogeui.com/components/scheduler): React scheduler / event calendar: day, work-week, week, month, agenda, timeline and year views, all-day strip, pure-kernel overlap layout, drag & resize with Escape-cancel, drag-to-create, recurrence with occurrence-vs-series editing, resource grouping, reminders, an appointment popup and a form editor — running the same scheduler engine and stylesheet as the Angular scheduler package. **Commercial licence.** - [@oge-ui/pivot-engine](https://www.npmjs.com/package/@oge-ui/pivot-engine): Framework-free pivot grid engine shared by @oge-ui/pivot and @oge-ui/react-pivot (ADR 0003): field layout, header layout and virtualization math, the remote-store adapter, menus, value filters, the field chooser, keyboard navigation, persistence snapshots, the message catalog and the Excel workbook builder. Installed automatically — you rarely import it directly. **Commercial licence.** - [@oge-ui/react-pivot](https://www.ogeui.com/components/pivot-grid): React pivot grid: local rows or a remote pre-aggregated store, four drag & drop field areas, multi-level column headers, expand/collapse on both axes, sub and grand totals, display modes and running totals, header and measure menus, value filters, a field chooser, two-axis virtual scrolling, state persistence and CSV/Excel export — running the same framework-free pivot engine (@oge-ui/pivot-engine) and the same stylesheet as the Angular pivot package. **Commercial licence.** - [@oge-ui/gantt-engine](https://www.npmjs.com/package/@oge-ui/gantt-engine): Framework-free engine behind the Angular and React Gantt (ADR 0003): task-tree model and field mapping, calendar-true time scales, auto-scheduling, critical path, dependency routing, the OgeGanttCore controller, message catalogs and the Excel/PDF/PNG export builders. Installed automatically by @oge-ui/gantt and @oge-ui/react-gantt — you rarely import it directly. **Commercial licence.** - [@oge-ui/react-gantt](https://www.ogeui.com/components/gantt): React Gantt chart: virtualized task tree pane + timeline chart, summary/milestone/baseline bars, FS/SS/FF/SF dependency arrows, critical path, auto-scheduling on work calendars, resources and workload, drag editing with Escape-cancel, snapshot undo/redo, built-in context menu and task dialog, Excel/PDF/PNG export — running the same @oge-ui/gantt-engine controller and stylesheet as the Angular Gantt package. **Commercial licence.** ## Getting started - [Getting Started](https://www.ogeui.com/getting-started): Get started with OGE UI: install the packages, render your first Angular or React data grid and form editors, and see how the open-source packages fit together. - [Set up your project](https://www.ogeui.com/getting-started/setup): Set up an Angular or React project for OGE UI: version requirements, npm install or ng add, optional export dependencies, app providers and a quick check. - [Style the app](https://www.ogeui.com/getting-started/styling): Theme OGE UI with CSS design tokens: scoped overrides, Tailwind and Bootstrap bridge themes, dark mode, high contrast, reduced motion and component colors. - [Design tokens](https://www.ogeui.com/getting-started/tokens): OGE UI design token reference: every --oge-* CSS variable with its light, dark, high-contrast and bridge values, swatches, categories and the packages using it. - [Theme builder](https://www.ogeui.com/getting-started/theme-builder): Build an OGE UI theme live: edit accent, surfaces, text, radius and density on real components, check WCAG contrast, then export CSS variables or JSON. - [Localization](https://www.ogeui.com/getting-started/localization): Localize OGE UI: global and per-component message overrides, switching language at runtime, validation messages and Intl number and date locales. - [Localization API](https://www.ogeui.com/getting-started/localization/api): Localization API of OGE UI: provideOgeLocale, OgeLocaleProvider and the @oge-ui/locales packs for ten languages, lazy loaders and the message merge helper. ## Guides - [Guides](https://www.ogeui.com/guides): OGE UI guides: server rendering, Next.js, Vite and Nx setup, testing, performance, CSP and Trusted Types, headless engines, accessibility and versioning. - [Angular SSR, hydration and zoneless](https://www.ogeui.com/guides/angular-ssr): Angular SSR with OGE UI: client hydration with event replay, the replay fold for projected tabs and steps, SSR-safe ids, server output and zoneless apps. - [Next.js App Router](https://www.ogeui.com/guides/nextjs): Use OGE UI React components in the Next.js App Router: client boundaries, server rendering and hydration, locale on the server, CSS imports and providers. - [Vite, Angular CLI and Nx](https://www.ogeui.com/guides/build-tools): Add OGE UI to a Vite React app, an Angular CLI project or an Nx workspace: install, stylesheets, themes, ng add, secondary entry points and module boundaries. - [Testing](https://www.ogeui.com/guides/testing): Test apps built on OGE UI: Angular CDK harnesses and React Testing Library helpers for the grid, inputs, modal and tabs, plus jsdom gaps and Playwright tips. - [Performance](https://www.ogeui.com/guides/performance): Make OGE UI fast: grid virtualization knobs, remote data sources, loadSync for first paint, deferred loading of heavy families and per-entry bundle sizes. - [CSP and Trusted Types](https://www.ogeui.com/guides/security): Run OGE UI under a strict Content Security Policy: nonces, Trusted Types policy names, URL sanitizing, the rich-text sanitizer and a tested policy example. - [Headless engines](https://www.ogeui.com/guides/headless): Use OGE UI engines without the components: data processing in @oge-ui/core, interaction cores in @oge-ui/behavior and the commercial family engine packages. - [Accessibility](https://www.ogeui.com/guides/accessibility): OGE UI accessibility: keyboard maps per component family, screen reader behaviour, forced colors, reduced motion, RTL and the axe checks every change passes. - [Accessibility conformance report](https://www.ogeui.com/guides/accessibility/conformance): OGE UI accessibility conformance report (ACR) in the VPAT 2.5 format: self-assessed WCAG 2.2 level A and AA criteria with support levels and honest remarks. - [Versioning and deprecation](https://www.ogeui.com/guides/versioning): OGE UI versioning policy: semantic versions, small 1.1.x patch releases, how deprecations are announced, supported Angular and React ranges, LTS and EOL. ## AI - [AI coding assistants](https://www.ogeui.com/ai): Use OGE UI with AI coding assistants: llms.txt and llms-full.txt references, the ng add AGENTS.md block, the rules that matter and the mistakes models make. - [AI Grid Assistant](https://www.ogeui.com/components/ai): AI for Angular and React: ask a data grid in plain language, or fill a form from pasted text. Any model, validated changes, preview and undo, no rows sent. - [AI API](https://www.ogeui.com/components/ai/api): AI API reference: every input, output and method of oge-grid-assistant, the OpenAI-compatible, Anthropic and HTTP transports, config and shared types. ## Data Grid - [Data Grid](https://www.ogeui.com/components/data-grid): Data Grid for Angular and React: row and column virtualization, sorting, filtering, grouping, editing, master-detail, remote data and Excel/PDF export. - [Data Grid Playground](https://www.ogeui.com/components/data-grid/playground): Interactive OGE Data Grid playground: toggle filtering, paging, virtual scroll, selection, grouping, editing and more, and copy the generated template. - [Data Grid Sorting & Paging](https://www.ogeui.com/components/data-grid/sorting): OGE Data Grid sorting and paging: click to sort, Shift+click for multi-column sort, a third click to clear, plus a pager with page sizes over 10k rows. - [Data Grid Virtual Scroll](https://www.ogeui.com/components/data-grid/virtual-scroll): OGE Data Grid virtual scrolling: thousands of rows in one scrollable list with only the visible window in the DOM — tune rowHeight and overscan. - [Data Grid Infinite Scroll](https://www.ogeui.com/components/data-grid/infinite-scroll): OGE Data Grid infinite scroll: a million remote rows, none preloaded — the grid fetches sparse 100-row blocks around the viewport as you drag the scrollbar. - [Data Grid Remote Data](https://www.ogeui.com/components/data-grid/remote-data): OGE Data Grid remote data: delegate sorting, filtering, search and paging to a backend with CustomDataSource, cursor paging, debouncing and AbortSignal. - [Data Grid Live Updates](https://www.ogeui.com/components/data-grid/live-updates): OGE Data Grid live updates: push batches through a DataSource changes stream and the grid patches rows in place, flashing changed cells without a reload. - [Data Grid Columns](https://www.ogeui.com/components/data-grid/columns): OGE Data Grid columns: banded headers with column groups, lookup columns, calculated values, initial sort order, word wrap and responsive column hiding. - [Data Grid Filtering](https://www.ogeui.com/components/data-grid/filtering): OGE Data Grid filtering: a filter row with operators, Excel-style header filters, a highlighting search panel and a filter builder for and/or trees. - [Data Grid Selection](https://www.ogeui.com/components/data-grid/selection): OGE Data Grid selection: checkbox and click selection with a filter-aware select-all, Ctrl and Shift ranges, keyboard cell navigation and row actions. - [Data Grid Editing](https://www.ogeui.com/components/data-grid/editing): OGE Data Grid editing: row, cell, batch, form and popup modes with dirty markers, required-field validation, custom edit templates and save events. - [Data Grid Grouping](https://www.ogeui.com/components/data-grid/grouping): OGE Data Grid grouping: drag headers into the group panel, collapse group rows, show group and total summaries, pin columns and use the column chooser. - [Data Grid Rows & Templates](https://www.ogeui.com/components/data-grid/rows): Data Grid rows and templates for Angular and React: full row templates, a custom no-data state, row drag and drop reordering, a focused row and a loading panel. - [Data Grid State Persistence](https://www.ogeui.com/components/data-grid/persistence): OGE Data Grid state persistence: save sorting, filters, grouping, widths, order and pins with stateKey, a custom storage backend or state()/applyState(). - [Data Grid Context Menus](https://www.ogeui.com/components/data-grid/context-menu): OGE Data Grid context menus: right-click rows for your own actions and headers for the built-in sort, group and column commands, with typed menu items. - [Data Grid Master-Detail](https://www.ogeui.com/components/data-grid/master-detail): OGE Data Grid master-detail: expand a row to render any component beneath it from a typed detail template, with treegrid semantics for screen readers. - [Data Grid Range Selection & Clipboard](https://www.ogeui.com/components/data-grid/range-selection): OGE Data Grid range selection: drag or Shift+Arrow cell ranges, TSV copy, paste from Excel, a fill handle that extends series, Ctrl+Z undo and validation. - [Data Grid Conditional Formatting](https://www.ogeui.com/components/data-grid/conditional-formatting): OGE Data Grid conditional formatting: rowClass and cellClass hooks, declarative rules, data bars, color scales, icon sets, merged cells and auto-fit. - [Data Grid Pinned Rows](https://www.ogeui.com/components/data-grid/pinned-rows): OGE Data Grid pinned rows: sticky top and bottom rows that survive virtual scroll, sticky group headers, row drag between grids and a go-to-page pager. - [Data Grid Excel & PDF Export](https://www.ogeui.com/components/data-grid/export): OGE Data Grid Excel and PDF export: merged banded headers, frozen panes, collapsible group outlines, SUBTOTAL formulas, typed cells and styled formatting. - [Data Grid API](https://www.ogeui.com/components/data-grid/api): OGE Data Grid API reference: every input, output, method and type of oge-grid and oge-column, plus data sources, grid types and the config provider. ## Tree List - [Tree List](https://www.ogeui.com/components/tree-list): Tree List for Angular and React: the data grid feature set on hierarchical data from flat parent-id rows or nested children, with lazy loading and drag-drop. - [Tree List Lazy Loading](https://www.ogeui.com/components/tree-list/lazy-loading): OGE Tree List lazy loading: hand the tree a DataSource and hasItemsExpr, and child rows are fetched from the server on demand the first time a node expands. - [Tree List Filtering](https://www.ogeui.com/components/tree-list/filtering): OGE Tree List filtering and search: a filter row and search panel that keep every matching row’s ancestor chain visible, so a filtered tree stays a tree. - [Tree List Selection](https://www.ogeui.com/components/tree-list/selection): OGE Tree List selection: single and multiple row selection, plus recursive tri-state checkboxes where checking a parent selects its entire subtree. - [Tree List Virtual Scroll](https://www.ogeui.com/components/tree-list/virtual-scroll): OGE Tree List virtual scroll: 100,000 nodes stay smooth because only visible branches are flattened and the DOM is windowed by a Fenwick-tree virtualizer. - [Tree List Drag & Drop](https://www.ogeui.com/components/tree-list/drag-drop): OGE Tree List drag and drop: drag a row by its handle onto another to reparent it with its subtree, guarded against cycles and with keyboard moving. - [Tree List Summaries](https://www.ogeui.com/components/tree-list/summaries): OGE Tree List summaries: total footers over every visible row, recursive per-parent aggregates, both carried into Excel/PDF export, and remote filtering. - [Tree List Editing](https://www.ogeui.com/components/tree-list/editing): OGE Tree List editing: all five data grid edit modes on hierarchical rows, form layouts, and adding child rows under a chosen parent with initNewRow. - [Tree List API](https://www.ogeui.com/components/tree-list/api): OGE Tree List API reference: every input, output, method and type of oge-tree-list — hierarchy mapping, expansion, selection, editing and lazy data. ## Inputs - [Inputs](https://www.ogeui.com/components/inputs): Form inputs for Angular and React: TextBox, TextArea and NumberBox on one field chrome with styling modes, sizes, floating labels, prefix and suffix slots. - [Input Validation](https://www.ogeui.com/components/inputs/validation): OGE input validation: standalone validators, Angular reactive forms and Signal Forms on OGE editors, linked fields and an async validation pending indicator. - [Masked Text Box](https://www.ogeui.com/components/inputs/masked-text-box): OGE MaskedTextBox: mask slots, escapes and custom rules, overwrite typing that skips literals, raw or formatted values and a mask validator for forms. - [Select Box](https://www.ogeui.com/components/inputs/select-box): OGE Select Box and Tag Box: a searchable WAI-ARIA combobox with data mapping, grouping, remote paged data, templates, multi-select tags and select all. - [Tree Select](https://www.ogeui.com/components/inputs/tree-select): OGE Tree Select: a dropdown that picks values from a tree — nested data, search, single or multiple selection shown as chips and lazy loaded children. - [Multi-Column ComboBox](https://www.ogeui.com/components/inputs/multi-column-combo-box): OGE Multi-Column ComboBox: a combo box whose popup is a small grid with columns, formats, cell templates, multiple selection, remote data and APG keyboard. - [Autocomplete](https://www.ogeui.com/components/inputs/autocomplete): OGE Autocomplete: suggestions as you type with tunable matching, force selection, virtual scrolling, lazy server-side data and full keyboard support. - [Toggle Controls](https://www.ogeui.com/components/inputs/toggle-controls): OGE CheckBox, Switch, RadioGroup and ToggleGroup: tri-state checkboxes, on/off switches, radio choices and segmented toggles, each an accessible form value. - [Check Box Group](https://www.ogeui.com/components/inputs/check-box-group): OGE CheckBoxGroup: an items-bound list of checkboxes with an array value, horizontal, vertical or column layouts, a tri-state select all and validation. - [Slider](https://www.ogeui.com/components/inputs/slider): OGE Slider and RangeSlider: WAI-ARIA single and multi-thumb sliders with ticks, labels, a value indicator, step buttons, vertical mode and form binding. - [Date Editors](https://www.ogeui.com/components/inputs/date-box): OGE DateBox and Calendar: date, time and datetime pickers, range selection with presets, masked segment entry, a clock and data grid integration. - [Color Box](https://www.ogeui.com/components/inputs/color-box): OGE ColorBox: a color picker dropdown with hex, rgb and hsl output, alpha, a swatch palette view, apply buttons and parsing of any typed CSS color. - [Color Gradient](https://www.ogeui.com/components/inputs/color-gradient): OGE ColorGradient: an inline color picker with a saturation surface, hue and alpha sliders, hex and RGBA inputs and a live WCAG contrast-ratio check. - [Color Palette](https://www.ogeui.com/components/inputs/color-palette): OGE ColorPalette: a standalone swatch grid with preset palettes, custom swatches, configurable columns and APG grid keyboard navigation as a form value. - [Rating](https://www.ogeui.com/components/inputs/rating): OGE Rating: stars or custom icons with half and fractional precision, hover preview, clear on re-click, read-only mode, RTL and slider or radio-group keys. - [OTP Input](https://www.ogeui.com/components/inputs/otp-input): OGE OTP input: one-time-code cells with numeric or alphanumeric filtering, paste and SMS autofill, arrow and Backspace keys, masking and a completion event. - [Signature Pad](https://www.ogeui.com/components/inputs/signature-pad): OGE signature pad: smooth pointer strokes, undo and clear, PNG or SVG data URL output, a keyboard-accessible typed signature mode and resize-safe redraws. - [List Box](https://www.ogeui.com/components/inputs/list-box): OGE ListBox: a WAI-ARIA listbox with single or multiple selection, groups, item templates, type-ahead, search and range selection as a form value. - [Transfer List](https://www.ogeui.com/components/inputs/transfer-list): OGE TransferList: a dual list box moving selected or all items by buttons, drag and drop or keyboard shortcuts, with per-list search and live announcements. - [Mention](https://www.ogeui.com/components/inputs/mention): OGE Mention: @ and # triggers in a text area with a caret-anchored suggestion popup, async sources, custom item templates and the mentioned items as output. - [Input Showcase](https://www.ogeui.com/components/inputs/showcase): OGE input showcase: a character counter, password reveal and copy buttons, locale-aware number entry and debounced value commits on OGE text editors. - [Inputs API](https://www.ogeui.com/components/inputs/api): OGE Inputs API reference: every input, output and type of the OGE editors — text, masked, number, select, tag, date, color, slider and choice controls. ## Buttons - [Buttons](https://www.ogeui.com/components/buttons): Button for Angular and React by OGE UI: severities and styling modes, sizes, icons, custom colors and badges on a signal-based, accessible button. - [Button Interactions](https://www.ogeui.com/components/buttons/interactions): OGE button interactions: async click handlers with automatic loading state, a click guard against double submits, hold-to-confirm and auto-repeat. - [Button Group](https://www.ogeui.com/components/buttons/button-group): OGE Button Group: single selection on the WAI-ARIA radio pattern, multiple selection as toggle buttons, and data-driven items with two-way binding. - [Drop Down Button](https://www.ogeui.com/components/buttons/drop-down-button): OGE Drop Down Button and split button: menu items, a remembered last action, async item loading and custom panel content with full keyboard support. - [FAB & Speed Dial](https://www.ogeui.com/components/buttons/fab): Floating Action Button and Speed Dial for Angular and React: pinned FABs with safe-area insets, extended labels and an APG menu-button dial with arrow keys. - [Buttons API](https://www.ogeui.com/components/buttons/api): OGE Buttons API reference: every input, output and type of oge-button, oge-button-group and oge-drop-down-button, plus the buttons config provider. ## Overlay - [Overlay](https://www.ogeui.com/components/overlay): Angular and React overlay primitives: flip-aware anchored panels, popups and WAI-ARIA menu lists — the positioning engine behind every OGE dropdown and menu. - [Tooltip & Context Menu](https://www.ogeui.com/components/overlay/tooltip-context-menu): Tooltip and Context Menu for Angular and React: placement, show and hide delays, right-click menus on any element with nested items and typed menu events. - [Popover](https://www.ogeui.com/components/overlay/popover): Popover for Angular and React: anchored dialogs with title, actions and a callout arrow; click, hover, focus or manual triggers, modal focus trap, typed events. - [Action Sheet](https://www.ogeui.com/components/overlay/action-sheet): Action Sheet for Angular and React: a mobile bottom sheet of actions with icons, destructive and disabled rows, swipe-down dismissal, a focus trap and Cancel. - [Modal](https://www.ogeui.com/components/overlay/modal): OGE Modal dialog: confirm, alert and prompt helpers, nine placements, full screen, drag and resize, a modal service, async close guards and typed results. - [Toast](https://www.ogeui.com/components/overlay/toast): OGE Toast notifications: severities, positions and stacking, sticky toasts with actions and undo, promise toasts, coalescing, progress and announcements. - [Window](https://www.ogeui.com/components/overlay/window): Window for Angular and React: non-modal floating windows with shared z-order, title-bar drag, 8-way resize, keyboard move, minimize, maximize and placements. - [Overlay API](https://www.ogeui.com/components/overlay/api): OGE Overlay API reference: oge-modal, the modal and toast services, live announcer, tooltip, context menu, menu list, anchored panel, popup and positions. ## Tabs - [Tabs](https://www.ogeui.com/components/tabs): Tabs for Angular and React: declarative or data-driven tabs with lazy panels, keep-alive, closable tabs with async guards, overflow menus and drag reordering. - [Routed Tabs](https://www.ogeui.com/components/tabs/routed): Angular routed tabs: bind the oge-tabs selectedKey one-way from the URL and navigate on selectionChanged, so each tab is a child route with deep links. - [Tabs API](https://www.ogeui.com/components/tabs/api): OGE Tabs API reference: every input, output and type of oge-tab-panel, oge-tabs and oge-tab, including selection, overflow and the tabs config provider. ## Layout - [Accordion](https://www.ogeui.com/components/accordion): Angular and React Accordion: WAI-ARIA panels with single or multiple expansion, lazy content, async guards, a nested panel bar and a standalone expansion panel. - [Accordion API](https://www.ogeui.com/components/accordion/api): OGE Accordion API reference: oge-accordion, oge-accordion-item, oge-panel-bar and oge-expansion-panel — every input, output, type and the config provider. ## Forms - [Form](https://www.ogeui.com/components/forms): Forms for Angular and React: declarative or data-driven items over the OGE editors, dataType-based editor selection, groups, label placement and submit. - [Form Layout](https://www.ogeui.com/components/forms/layout): OGE form layout: fixed or auto-fit columns, container-query responsive layouts, nested groups, tab and accordion sections, read-only and visibility rules. - [Form Validation](https://www.ogeui.com/components/forms/validation): OGE form validation: declarative and cross-field rules, server errors, conditional fields, Angular Signal Forms and reactive forms, and an accessible summary. - [Forms API](https://www.ogeui.com/components/forms/api): OGE Forms API reference: every input, output and type of oge-form, oge-form-item, oge-form-group and oge-validation-summary, plus schema metadata. ## Upload - [Upload](https://www.ogeui.com/components/upload): Angular and React file upload: drag and drop with directories and paste, restrictions with reasons, image previews, and chunked, resumable transfer with retry. - [Upload API](https://www.ogeui.com/components/upload/api): OGE Upload API reference: every input, output, method and type of oge-file-uploader, the upload adapter and transport contract and the config provider. ## Rich Text Editor - [Rich Text Editor](https://www.ogeui.com/components/editor): Rich text editor for Angular and React: headings, lists, links, images, colors and undo on its own document model, markdown shortcuts and sanitized HTML output. - [Rich Text Editor API](https://www.ogeui.com/components/editor/api): OGE Rich Text Editor API reference: every input, output and method of oge-editor, the toolbar tools, the command vocabulary, the sanitizer and config. ## Navigation - [Tree View](https://www.ogeui.com/components/tree-view): Tree View for Angular and React: flat or nested data, tri-state checkboxes with cascade, search, lazy loading, virtual scrolling and drag and drop reparenting. - [Navigation API](https://www.ogeui.com/components/tree-view/api): OGE navigation API reference: inputs, outputs and types of oge-tree-view, oge-drawer, oge-stepper, oge-menubar, oge-breadcrumb and oge-pagination. ## Pivot Grid - [Pivot Grid](https://www.ogeui.com/components/pivot-grid): Pivot Grid for Angular and React by OGE UI: cross-tab analytics over raw records with rows, columns and measures, grand totals, a field panel and sorting. - [Pivot Analytics & Export](https://www.ogeui.com/components/pivot-grid/analytics): OGE Pivot Grid analytics: percent-of-total and running-sum display modes, two-axis virtual scrolling, persisted layouts, and CSV or Excel export. - [Pivot Chart Integration](https://www.ogeui.com/components/pivot-grid/chart-integration): OGE Pivot Grid with charts: getChartData turns the pivot view into chart series, resultChange keeps a linked chart in sync and row clicks narrow it. - [Pivot Calculated Fields](https://www.ogeui.com/components/pivot-grid/calculated-fields): OGE Pivot Grid calculated fields and filters: measures computed from other measures, Top N, label and value filters, row header layouts and PDF export. - [Pivot Grid API](https://www.ogeui.com/components/pivot-grid/api): OGE Pivot Grid API reference: every input, output, method and type of oge-pivot-grid and oge-pivot-field, from areas and summaries to export options. ## BPMN Editor - [BPMN Editor](https://www.ogeui.com/components/bpmn): BPMN Editor for Angular and React: a BPMN 2.0 modeler with palette, orthogonal routing, undo/redo, XML import and export, autosave and no third-party branding. - [BPMN Validation](https://www.ogeui.com/components/bpmn/validation): OGE BPMN Editor validation: bpmnlint-style rules, live badges, a problems panel, custom rules and severity overrides, and validate() for headless CI checks. - [Extending the BPMN Editor](https://www.ogeui.com/components/bpmn/extending): Extending the OGE BPMN Editor: pluggable properties providers, custom palette and context-pad entries, safe SVG renderers and Camunda element templates. - [BPMN Camunda / Zeebe](https://www.ogeui.com/components/bpmn/camunda): OGE BPMN Editor for Camunda and Zeebe: editable task definitions, io mappings, headers and assignments, timer and message payloads, and PNG export. - [BPMN Editor API](https://www.ogeui.com/components/bpmn/api): BPMN Editor API reference: every input, output, method and type of oge-bpmn-editor and the dependency-free BPMN XML and diagram-interchange engine. ## Charts - [Charts](https://www.ogeui.com/components/charts): Charts for Angular and React: line, bar, area, candlestick, pie, polar and range selector charts on an SVG kernel with zoom, pan, tooltips and annotations. - [Charts Axes & Layout](https://www.ogeui.com/components/charts/axes-layout): Chart axes and layout: rotated horizontal bars, price and volume panes, constant lines and strips, axis breaks, tick intervals, RTL, pinch zoom and draw-in. - [Gauges & Sparklines](https://www.ogeui.com/components/charts/gauges): OGE gauges and sparklines: circular and linear gauges with ranges and needle, bar or marker indicators, bullet charts and word-sized sparklines. - [Funnel, Heatmap & Flows](https://www.ogeui.com/components/charts/specialized): Funnel, pyramid, heatmap, treemap, sunburst, Sankey and GeoJSON vector map charts with drill-down, colour scales, zoom and full keyboard access. - [Charts API](https://www.ogeui.com/components/charts/api): OGE Charts API reference: every input, output and type of the cartesian, pie, polar, gauge, sparkline, funnel, heatmap, treemap, Sankey and map charts. ## Gantt - [Gantt](https://www.ogeui.com/components/gantt): Gantt chart for Angular and React: task tree and timeline with dependencies, critical path, baselines, drag editing, work calendars, undo/redo and export. - [Gantt Scheduling & Constraints](https://www.ogeui.com/components/gantt/scheduling): OGE Gantt scheduling: lag and lead on every link type, constraints, deadlines, manual tasks, slack, conflicts, baselines, split tasks and progress line. - [Gantt Resources](https://www.ogeui.com/components/gantt/resources): Gantt resources for Angular and React: assignment units, effort-driven durations, a utilization histogram with over-allocation and a resource-centric view. - [Gantt Task List Editing](https://www.ogeui.com/components/gantt/task-list): OGE Gantt task list: inline cell editing, header sorting, filter row and search, column resize, reorder and freeze, multi-select with bulk edits. - [Gantt Import / Export](https://www.ogeui.com/components/gantt/import-export): OGE Gantt MS Project XML import and export: tasks, links with lag, constraints, baselines, resources, assignments and calendars, no dependencies. - [Gantt API](https://www.ogeui.com/components/gantt/api): OGE Gantt API reference: every input, output, method and type of oge-gantt — task and dependency field mapping, scales, editing and the config provider. ## Kanban - [Kanban](https://www.ogeui.com/components/kanban): Kanban board for Angular and React: columns, swimlanes and WIP limits, virtualized cards, drag and drop with Escape-cancel, keyboard moving and an edit dialog. - [Kanban Filtering & Sorting](https://www.ogeui.com/components/kanban/filtering): Angular and React Kanban filtering and sorting: tag, assignee and priority filter chips, predicate filters, per-column sort menus and CSV or Excel card export. - [Kanban Multi-select & Cross-board](https://www.ogeui.com/components/kanban/multi-select): Kanban multi-select for Angular and React: Ctrl and Shift selection, multi-card drag, drag between boards, swimlane WIP limits, quick add, checklists and undo. - [Kanban API](https://www.ogeui.com/components/kanban/api): OGE Kanban API reference: every input, output, method and type of oge-kanban — card field mapping, columns, swimlanes, templates and config provider. ## Spreadsheet - [Spreadsheet](https://www.ogeui.com/components/spreadsheet): Excel viewer for Angular and React: shows .xlsx workbooks as Excel does, with measured fonts, formats, borders, frozen panes and pictures, read in the browser. - [Spreadsheet API](https://www.ogeui.com/components/spreadsheet/api): OGE Spreadsheet API reference: every input, output, method and type of oge-spreadsheet — sources, two-way sheet and zoom, find, copy, print and config. ## Scheduler - [Scheduler](https://www.ogeui.com/components/scheduler): Scheduler for Angular and React: day, week, month, year, agenda and timeline views with drag and resize, recurrence, teams, appointment popups and form editing. - [Scheduler API](https://www.ogeui.com/components/scheduler/api): OGE Scheduler API reference: every input, output, method and type of oge-scheduler — appointment field mapping, views, editing and the config provider. - [Scheduler Views & Grouping](https://www.ogeui.com/components/scheduler/views-grouping): OGE Scheduler views and grouping: N-day and N-week views, month and year timelines, week numbers, nested resource groups, vertical layout, +N more. - [Scheduler Resources & Availability](https://www.ogeui.com/components/scheduler/resources-availability): OGE Scheduler availability: hatched disabled slots, per-resource work hours, conflict checks, external drag-in, multi-select, copy, paste, undo. - [Scheduler Recurrence Editor](https://www.ogeui.com/components/scheduler/recurrence-editor): Scheduler recurrence editor for Angular and React: nth and last weekday rules, several month days, yearly patterns, count or until, skipped dates, live summary. - [Scheduler Import / Export](https://www.ogeui.com/components/scheduler/import-export): OGE Scheduler import and export: iCalendar .ics export and import with series and overrides, PDF and Excel list exports and print of the current view. - [Scheduler Time Zones](https://www.ogeui.com/components/scheduler/time-zones): OGE Scheduler time zones: display timeZone, per-appointment start and end zones, DST-exact 23- and 25-hour days, TZID recurrence and zone pickers. - [Scheduler Remote Data](https://www.ogeui.com/components/scheduler/remote-data): OGE Scheduler remote data: load appointments per visible range with prefetch, debounce, AbortSignal, a range cache, CRUD write-back and reload(). ## Core - [Licensing](https://www.ogeui.com/license): OGE UI licensing: the suite is MIT forever; OGE UI Pro — Pivot, Gantt, Scheduler, Kanban, Charts, BPMN and Spreadsheet — is $299 per developer per year. - [Get your license key](https://www.ogeui.com/license/claim): Get your OGE UI Pro license key: enter the order number and email from your purchase to retrieve the key, and come back any time to retrieve it again. ## Other pages - [Components](https://www.ogeui.com/components): Browse every OGE UI component family with live previews: data grid, tree list, pivot grid, charts, scheduler, gantt, kanban, spreadsheet, inputs and forms. - [Progress & Loading](https://www.ogeui.com/components/progress): OGE progress bar, circular ring, load indicator and skeleton: determinate, buffer, chunked and circular bars, spinners and placeholders with correct ARIA. - [Progress & Loading API](https://www.ogeui.com/components/progress/api): OGE Progress & Loading API reference: every input, output and type of oge-progress-bar, oge-load-indicator, oge-load-panel and oge-skeleton, with configs. - [Load Panel](https://www.ogeui.com/components/progress/load-panel): Load Panel for Angular and React: a shading overlay over a container or the page, with show delay, minimum display time, aria-busy and a screen-reader message. - [Avatar & Badge](https://www.ogeui.com/components/avatar): Avatar and Badge for Angular and React: image, initials and icon fallback, presence dots, avatar groups with +N overflow and count badges described to readers. - [Avatar & Badge API](https://www.ogeui.com/components/avatar/api): OGE Avatar & Badge API reference: every input, output and type of oge-avatar, oge-avatar-group and oge-badge, plus their config providers and messages. - [Chip](https://www.ogeui.com/components/chip): Angular and React Chip and Chip List: selectable and removable chips, single or multiple selection as an APG listbox, removable grids and Delete-key removal. - [Chip API](https://www.ogeui.com/components/chip/api): OGE Chip API reference: every input, output, method and type of oge-chip and oge-chip-list, the chip template slot, removal events and the config provider. - [Alert](https://www.ogeui.com/components/alert): Angular and React Alert: inline info, success, warning and error messages with titles, actions and dismiss, role alert or status by severity, and custom icons. - [Alert API](https://www.ogeui.com/components/alert/api): OGE Alert API reference: every input, output, method and type of oge-alert, the actions and icon slots, the cancelable closing event and config provider. - [Timeline](https://www.ogeui.com/components/timeline): Timeline for Angular and React: vertical or horizontal ordered-list timelines with alternating sides, markers, icons, severities, Intl dates and item templates. - [Timeline API](https://www.ogeui.com/components/timeline/api): OGE Timeline API reference: every input and type of oge-timeline, the content, marker and opposite template slots, item fields and the config provider. - [Carousel](https://www.ogeui.com/components/carousel): Carousel for Angular and React: an APG slide show with swipe, scroll snap, dots or thumbnails, loop, autoplay with a pause control, slides per view and RTL. - [Carousel API](https://www.ogeui.com/components/carousel/api): OGE Carousel API reference: every input, method, output and type of oge-carousel, its declarative slides, the slide template and the config provider. - [Tile Layout](https://www.ogeui.com/components/tile-layout): Angular and React Tile Layout: drag-and-drop dashboard tiles on a CSS grid with column and row spans, resize handles, keyboard twins and a saved layout state. - [Tile Layout API](https://www.ogeui.com/components/tile-layout/api): OGE Tile Layout API reference: every input, output and method of oge-tile-layout and its items, the cancelable reorder and resize events, slots and state. - [Data View](https://www.ogeui.com/components/data-view): Data View for Angular and React: templated items in responsive grid or list layouts via container queries, with search, sorting, paging and listbox selection. - [Data View API](https://www.ogeui.com/components/data-view/api): OGE Data View API reference: every input, model, output, method and type of oge-data-view, its item, list-item and empty slots, and the config provider. - [List View](https://www.ogeui.com/components/list-view): List View for Angular and React: a templated APG listbox or list with selection, sticky groups, virtual scrolling, search, infinite scroll and swipe actions. - [List View API](https://www.ogeui.com/components/list-view/api): OGE List View API reference: every input, model, method, output and type of oge-list-view, the item, group, empty and footer slots and the config provider. - [App Bar](https://www.ogeui.com/components/app-bar): App Bar for Angular and React: top and bottom bars with start, center and end sections, sticky or fixed placement with safe-area padding, colors and landmarks. - [App Bar API](https://www.ogeui.com/components/app-bar/api): OGE App Bar API reference: every input and type of oge-app-bar, the start, center and end slots, positions, colors, landmarks and the config provider. - [Card](https://www.ogeui.com/components/card): Angular and React Card: header, full-bleed media, actions and footer as attribute slots, four chrome presets, horizontal layout and accessible clickable cards. - [Card API](https://www.ogeui.com/components/card/api): OGE Card API reference: every input and type of oge-card, the media, avatar, header-action, action, footer and separator slots, and the config provider. - [Splitter](https://www.ogeui.com/components/splitter): Angular and React Splitter: resizable, collapsible, nestable panes on the WAI-ARIA window splitter pattern with ratio or pixel sizes, keyboard, RTL and touch. - [Splitter API](https://www.ogeui.com/components/splitter/api): OGE Splitter API reference: every input, output, method and type of oge-splitter and oge-splitter-pane, the separator ARIA and the config provider. - [Toolbar](https://www.ogeui.com/components/toolbar): Toolbar for Angular and React: a WAI-ARIA command bar with roving tabindex, before, center and after groups, toggle commands and an overflow menu that adapts. - [Toolbar API](https://www.ogeui.com/components/toolbar/api): OGE Toolbar API reference: every input, output, method and type of oge-toolbar and oge-toolbar-item, the overflow model and the config provider. - [Stepper](https://www.ogeui.com/components/stepper): Stepper for Angular and React: a linear or free wizard with step states, async leave guards, horizontal or vertical orientation and aria-current step semantics. - [Drawer](https://www.ogeui.com/components/drawer): Angular and React Drawer: overlay, push or side panels with a focus trap when modal, a compact rail, responsive downgrade, close guards and an app shell layout. - [Breadcrumb](https://www.ogeui.com/components/breadcrumb): Breadcrumb for Angular and React: a WAI-ARIA trail of real links with aria-current, collapsing middle crumbs into an ellipsis menu as its container narrows. - [Routed Breadcrumb](https://www.ogeui.com/components/breadcrumb/routed): Angular Breadcrumb with the router: derive the trail from the current URL, keep every crumb a real link and let the router handle clicks — no router dependency. - [Pagination](https://www.ogeui.com/components/pagination): Angular and React Pagination: a standalone pager with a numeric window and ellipses, page-size selector, info range, jump-to-page and an adaptive compact mode. - [Menubar](https://www.ogeui.com/components/menubar): Angular and React Menubar: a WAI-ARIA menubar with roving tabindex, nested submenus, vertical layout, cancelable open and close events and a hamburger collapse. - [Routed Menubar](https://www.ogeui.com/components/menubar/routed): Angular Menubar with the router: bind activeKey from the URL to mark aria-current="page" and navigate on itemClick, while url items stay real links. - [Pricing](https://www.ogeui.com/pricing): OGE UI pricing: the core Angular and React suite is MIT and free forever; OGE UI Pro adds seven enterprise families for $299 per developer per year. - [Compare](https://www.ogeui.com/compare): Compare OGE UI with AG Grid, Kendo UI, DevExtreme and PrimeNG: licenses, prices, Angular and React support, grid features and where each library is stronger. - [OGE UI vs AG Grid](https://www.ogeui.com/compare/ag-grid): OGE UI vs AG Grid: an AG Grid alternative for Angular and React with MIT range selection, Excel export and master-detail. License, price and features compared. - [OGE UI vs Kendo UI](https://www.ogeui.com/compare/kendo-ui): OGE UI vs Kendo UI: a Kendo UI alternative for Angular and React with an MIT data grid, signal APIs and zoneless support. License, price and features compared. - [OGE UI vs DevExtreme](https://www.ogeui.com/compare/devextreme): OGE UI vs DevExtreme: a DevExtreme alternative for Angular and React with an MIT data grid and familiar remote load options. License, price, features compared. - [OGE UI vs PrimeNG](https://www.ogeui.com/compare/primeng): OGE UI vs PrimeNG: a PrimeNG alternative for Angular that covers React too, with an MIT grid, signal APIs and zoneless. PrimeUI licensing and features compared. - [Changelog](https://www.ogeui.com/changelog): OGE UI changelog: every release of the Angular and React packages, with new components, API additions, fixes and breaking changes, each linkable by version. - [Bundle size](https://www.ogeui.com/bundle-size): OGE UI bundle size: the gzip size of every published Angular, React and engine entry point, grouped by package and license, and how CI enforces each budget. ## Optional - [Full reference](https://www.ogeui.com/llms-full.txt): every API member and demo source in one file — the best single input for code generation. - [Roadmap](https://github.com/oge-ui/oge-ui/blob/main/ROADMAP.md): shipped features and feature-parity tables against the reference libraries. - [Changelog](https://github.com/oge-ui/oge-ui/blob/main/CHANGELOG.md): released versions per package. - [Source](https://github.com/oge-ui/oge-ui): Nx monorepo — every package under `packages/`, docs app under `apps/dev-app`.