# Diff View

Unified, split, and inline diff viewer with LCS-based diff algorithm and line numbers



<ComponentPreview base="opentui" name="diff-view-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui-diff-view
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource base="opentui" name="diff-view" title="components/ui/diff-view.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { DiffView } from "@/components/ui/diff-view";
```

```tsx
<DiffView
  filename="config.ts"
  oldText={"const port = 3000;\nconst host = 'localhost';"}
  newText={"const port = 8080;\nconst host = 'localhost';\nconst debug = true;"}
/>
```

API Reference [#api-reference]

DiffView [#diffview]

| Prop              | Type                               | Default     |
| ----------------- | ---------------------------------- | ----------- |
| `oldText`         | `string`                           | `required`  |
| `newText`         | `string`                           | `required`  |
| `filename`        | `string`                           | -           |
| `language`        | `string`                           | -           |
| `mode`            | `"unified" \| "split" \| "inline"` | `"unified"` |
| `context`         | `number`                           | `3`         |
| `showLineNumbers` | `boolean`                          | `false`     |