ODS Installation - oxom Guide

ODS wird im Monorepo über das private Package @oxom/design bereitgestellt.

Package verwenden

import { Wordmark } from "@oxom/design"
import { Button } from "@oxom/design/ui/button"
import { Badge } from "@oxom/design/ui/badge"

Für Next.js Apps sollte das Package transpiliert werden:

const nextConfig = {
  transpilePackages: ["@oxom/design"]
}

export default nextConfig

Tokens einbinden

Für Apps mit Tailwind/CSS-Token-Unterstützung:

@import "@oxom/design/tokens/base.css";
@import "@oxom/design/tokens/default.css";

Die vollständigen Globals sind ebenfalls exportiert:

@import "@oxom/design/globals.css";

Private Add-Flows

Die Brand-App dokumentiert intern auch shadcn-artige Add-Flows:

npx @oxom/design add button --private-key "$OXOM_DESIGN_KEY"
npx @oxom/design add sheet --private-key "$OXOM_DESIGN_KEY"
npx @oxom/design add oxom-logo --private-key "$OXOM_DESIGN_KEY"

Diese Flows sind für interne ODS-Verteilung gedacht. Innerhalb des Monorepos ist der direkte Package-Import meistens einfacher.

Entwicklungsserver

pnpm -C apps/brand dev

Die ODS-App läuft lokal auf Port 3040.

​Package verwenden

​Tokens einbinden

​Private Add-Flows

​Entwicklungsserver

Package verwenden

Tokens einbinden

Private Add-Flows

Entwicklungsserver