> ## Documentation Index
> Fetch the complete documentation index at: https://guide.oxom.de/llms.txt
> Use this file to discover all available pages before exploring further.

# ODS Installation

> Wie ODS-Komponenten und Tokens in oxom Apps eingebunden werden.

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

## Package verwenden

```tsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
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:

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
const nextConfig = {
  transpilePackages: ["@oxom/design"]
}

export default nextConfig
```

## Tokens einbinden

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

```css theme={"theme":{"light":"github-light","dark":"github-dark"}}
@import "@oxom/design/tokens/base.css";
@import "@oxom/design/tokens/default.css";
```

Die vollständigen Globals sind ebenfalls exportiert:

```css theme={"theme":{"light":"github-light","dark":"github-dark"}}
@import "@oxom/design/globals.css";
```

## Private Add-Flows

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

```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
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

```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
pnpm -C apps/brand dev
```

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