Vite, Angular CLI and Nx

npm create vite@latest orders -- --template react-ts
cd orders
npm install @oge-ui/react-grid @oge-ui/react-buttons

// src/main.tsx — the stylesheets once, at the entry
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import '@oge-ui/react-grid/styles.css';
import '@oge-ui/react-buttons/styles.css';
import '@oge-ui/core/themes/dark.css'; // optional theme
import { App } from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

'use client';

import { OgeGrid } from '@oge-ui/react-grid';

const employees = [
  { id: 1, name: 'Ada Lovelace', title: 'Engineer' },
  { id: 2, name: 'Grace Hopper', title: 'Rear Admiral' },
];

// the 'use client' line is for React Server Component frameworks; Vite ignores it
const columns = [
  { field: 'id', caption: 'Id', width: 70, dataType: 'number' as const },
  { field: 'name', caption: 'Name' },
  { field: 'title', caption: 'Title' },
];

export function App() {
  return (
    <OgeGrid data={employees} keyField="id" columns={columns} locale="en-US" />
  );
}

ng new orders --style=css
cd orders
ng add @oge-ui/grid --theme=dark   # installs, registers the theme, writes AGENTS.md

/* src/styles.css — the manual equivalent of --theme (an Nx repo, a library) */
@import '@oge-ui/core/themes/dark.css';

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

@Component({
  selector: 'demo-root',
  imports: [OgeGrid, OgeColumn],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-grid [data]="employees" keyField="id" [filterRow]="true">
      <oge-column field="firstName" caption="First name" />
      <oge-column field="department" caption="Department" />
      <oge-column field="salary" caption="Salary" dataType="number" />
    </oge-grid>
  `,
})
export class Demo {
  readonly employees = [
    { id: 1, firstName: 'Ali', lastName: 'Yılmaz', department: 'Engineering', city: 'İstanbul', salary: 8400, hireDate: '2019-03-11' },
    { id: 2, firstName: 'Ayşe', lastName: 'Kaya', department: 'Sales', city: 'Ankara', salary: 7200, hireDate: '2020-07-02' },
    { id: 3, firstName: 'Mehmet', lastName: 'Demir', department: 'Engineering', city: 'İzmir', salary: 9100, hireDate: '2018-01-23' },
    { id: 4, firstName: 'Zeynep', lastName: 'Şahin', department: 'Finance', city: 'İstanbul', salary: 6800, hireDate: '2021-11-15' },
    { id: 5, firstName: 'Emre', lastName: 'Çelik', department: 'Support', city: 'Bursa', salary: 5400, hireDate: '2022-05-09' },
  ];
}

# OGE packages are ordinary npm dependencies of the workspace
npm install @oge-ui/grid @oge-ui/inputs        # Angular apps
npm install @oge-ui/react-grid                 # React apps

# no ng add step: an Nx workspace has no angular.json for the schematic to edit
# (it would only warn: "no angular.json found — Add @import … instead")

// apps/orders/project.json (excerpt) — a theme in the build styles, first
{
  "targets": {
    "build": {
      "options": {
        "styles": [
          "node_modules/@oge-ui/core/themes/dark.css",
          "apps/orders/src/styles.css"
        ]
      }
    }
  }
}