> ## 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 Komponenten

> Verfügbare ODS-Komponenten und Importpfade.

ODS-Komponenten liegen in `apps/brand/components` und werden über `@oxom/design` exportiert.

## UI-Komponenten

| Komponente      | Beschreibung                      | Import                          |
| --------------- | --------------------------------- | ------------------------------- |
| `button`        | Aktionen mit Varianten und Größen | `@oxom/design/ui/button`        |
| `badge`         | Status- und Label-Elemente        | `@oxom/design/ui/badge`         |
| `card`          | Strukturierte Content-Flächen     | `@oxom/design/ui/card`          |
| `dialog`        | Modal-Dialoge                     | `@oxom/design/ui/dialog`        |
| `dropdown-menu` | Kontextmenüs und Actions          | `@oxom/design/ui/dropdown-menu` |
| `input`         | Text-Eingabefelder                | `@oxom/design/ui/input`         |
| `tabs`          | Segmentierte Inhalte              | `@oxom/design/ui/tabs`          |
| `table`         | Tabellarische Datenanzeige        | `@oxom/design/ui/table`         |
| `tooltip`       | Kontext-Hinweise                  | `@oxom/design/ui/tooltip`       |
| `sheet`         | Offcanvas und Mobile Panels       | `@oxom/design/ui/sheet`         |

## Brand-Komponenten

| Komponente    | Beschreibung          | Import                                |
| ------------- | --------------------- | ------------------------------------- |
| `site-header` | ODS Header-Komponente | `@oxom/design/components/site-header` |
| `wordmark`    | Wortmarke / Logo      | `@oxom/design`                        |

## Beispiele

```tsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
import { Button } from "@oxom/design/ui/button"
import { Badge } from "@oxom/design/ui/badge"

export function Example() {
  return (
    <div className="flex items-center gap-2">
      <Button>Speichern</Button>
      <Badge variant="secondary">Aktiv</Badge>
    </div>
  )
}
```

```tsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
import { Sheet, SheetContent, SheetTrigger } from "@oxom/design/ui/sheet"
import { Button } from "@oxom/design/ui/button"

export function SettingsSheet() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Einstellungen</Button>
      </SheetTrigger>
      <SheetContent>
        Einstellungen
      </SheetContent>
    </Sheet>
  )
}
```

## Nutzung

* Nutze ODS-Komponenten, wenn eine passende Komponente existiert.
* Erweitere lokal nur, wenn der Anwendungsfall produkt- oder app-spezifisch ist.
* Wiederkehrende UI gehört in ODS, nicht in einzelne Apps.
* Komponenten sollen Zustände, Größen und Accessibility konsistent abbilden.