Installation

Registry einrichten

Das Paket liegt nicht auf npmjs.com, sondern in der Gentics-Registry (Zugriff restricted). Dein Projekt braucht deshalb dieselbe Scope-Zuordnung wie die Library selbst — in der .npmrc des Consumer-Projekts:

@gentics:registry=https://repo.gentics.com/repository/npm-products/

Dazu gültige Credentials für die Registry. Ohne beides schlägt die Installation mit 404 Not Found bzw. 401 Unauthorized auf @gentics/cockpit fehl.

npm i @gentics/cockpit

Peer-Dependencies

Die folgenden Pakete bringt dein Projekt mit. Sie sind bewusst nicht gebündelt, damit genau eine Instanz im Bundle landet — zwei React- oder zwei React-Query-Instanzen führen sonst zu kaputten Hooks bzw. zu zwei getrennten Caches:

Paket	Range
react	^19.0.0
react-dom	^19.0.0
@tanstack/react-query	^5.0.0
react-router	^7.0.0

npm i react react-dom @tanstack/react-query react-router

Importieren

Stylesheet des cockpits genau einmal, möglichst am Einstiegspunkt der App importieren

import '@gentics/cockpit/style.css';

warnung

Ohne style.css sind die Widgets unformatiert

Fehlt der Import, rendern die Widgets korrekt, sehen aber nicht gestyled aus.

Tailwind

@gentics/cockpit/style.css ist kein Tailwind-Setup, sondern ein fertig kompiliertes Stylesheet mit genau denjenigen Utility-Klassen, die die Library selbst verwendet

Dein eigenes Tailwind einrichten

Damit ist es auch der empfohlene Weg — drei Schritte:

npm i -D tailwindcss @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

/* src/index.css — dein eigenes Tailwind, scannt dein src/ */
@import "tailwindcss";

Importiert werden dann beide Stylesheets — im Demo-Projekt liegt das eigene am Einstiegspunkt und das der Library dort, wo das Sachbearbeiter-Cockpit gerendert wird:

// src/main.tsx
import './index.css';                        // dein Tailwind

// src/Cockpit.tsx
import '@gentics/cockpit/style.css';         // die Widget-Styles

Ob beide in derselben Datei stehen, ist egal; wichtig ist nur, dass keiner der beiden Imports fehlt.

Die Aufteilung dahinter:

Stylesheet	Deckt ab
@gentics/cockpit/style.css	die Klassen der Widgets — damit die Library unabhängig von deinem Tailwind-Setup aussieht wie vorgesehen
dein eigenes @import "tailwindcss"	die Klassen, die du in deinen Apps schreibst

Wenn du gar kein Tailwind einsetzen willst, dann stylst du deine App mit eigenem CSS. Die Widgets bleiben in jedem Fall korrekt formatiert, solange @gentics/cockpit/style.css importiert ist.

Was das Projekt außerdem braucht

• eine authConfig.json mit den OIDC-Settings deiner Keycloak-Instanz
• eine Keycloak-Instanz samt Account — auch im Mock-Modus
• ein Proxy, der /api/cockpit/an auf die ActaNova-API weiterleitet und dabei auf /api/main/v1 umschreibt — die Services rufen immer relativ zu dieser Base-URL

Das ist in Sachbearbeiter-Cockpit aufsetzen beschrieben, für den Betrieb im Container unter Deployment.