Getting Started

Templates

Mockups

Components

Special Animations

Buttons

Text Animations

Backgrounds

GitHub Inline Comments

GitHub-style inline diff comments component with hover-to-reveal comment buttons and interactive discussion threads.

Open in

This is a GitHub-style inline diff comments component. Hover over a line in the diff to reveal the "Add comment" button, then click to open a compact inline thread for discussion—just like reviewing code on GitHub.

src/server.ts

modified

```
 @@ -10,8 +10,10 @@
```

1010

 export async function getUserName(id: string) {

1111
```
   // Fetch user from cache or database
```
12
```
-  const user = cache.get(id)
```
12
```
+  let user = cache.get(id)
```
1313
```
   if (!user) {
```
14
```
+    user = await db.users.findById(id)
```
15
```
+    if (user) cache.set(id, user)
```
1416
```
   }
```
15
```
-  return user?.name
```
17
```
+  return user?.name ?? '(unknown)'
```
1618
```
 }
```

"use client"

import GithubInlineComments from "@/registry/eldoraui/github-inline-comments"

export function GithubInlineCommentsDemo() {
  return (
    <div className="mx-auto max-w-4xl p-4">
      <p className="text-muted-foreground mb-4 text-sm">
        This is a GitHub-style inline diff comments component. Hover over a line
        in the diff to reveal the &quot;Add comment&quot; button, then click to
        open a compact inline thread for discussion—just like reviewing code on
        GitHub.
      </p>
      <GithubInlineComments
        fileName="src/server.ts"
        diff={[
          { kind: "hunk", content: "@@ -10,8 +10,10 @@" },
          {
            kind: "context",
            old: 10,
            new: 10,
            content: "export async function getUserName(id: string) {",
          },
          {
            kind: "context",
            old: 11,
            new: 11,
            content: "  // Fetch user from cache or database",
          },
          {
            kind: "del",
            old: 12,
            new: null,
            content: "  const user = cache.get(id)",
          },
          {
            kind: "add",
            old: null,
            new: 12,
            content: "  let user = cache.get(id)",
          },
          { kind: "context", old: 13, new: 13, content: "  if (!user) {" },
          {
            kind: "add",
            old: null,
            new: 14,
            content: "    user = await db.users.findById(id)",
          },
          {
            kind: "add",
            old: null,
            new: 15,
            content: "    if (user) cache.set(id, user)",
          },
          { kind: "context", old: 14, new: 16, content: "  }" },
          { kind: "del", old: 15, new: null, content: "  return user?.name" },
          {
            kind: "add",
            old: null,
            new: 17,
            content: "  return user?.name ?? '(unknown)'",
          },
          { kind: "context", old: 16, new: 18, content: "}" },
        ]}
      />
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @eldoraui/github-inline-comments

Usage

import GithubInlineComments from "@/components/eldoraui/github-inline-comments"

<GithubInlineComments
  fileName="src/server.ts"
  diff={[
    { kind: "hunk", content: "@@ -10,8 +10,10 @@" },
    { kind: "context", old: 10, new: 10, content: "export async function getUserName(id: string) },
    { kind: "del", old: 12, new: null, content: "  const user = cache.get(id)" },
    { kind: "add", old: null, new: 12, content: "  let user = cache.get(id)" },
  ]}
/>

Props

Prop	Type	Default	Description
`diff`	`readonly Line[]`	`-`	Array of diff lines to display
`fileName`	`string`	`-`	Name of the file being displayed

Line Types

Type	Description
`hunk`	Diff hunk header (e.g., `@@ -10,8 +10,10 @@`)
`context`	Unchanged line with old and new line numbers
`add`	Added line (new line number, old is null)
`del`	Deleted line (old line number, new is null)

Font Weight Text Gradual Spacing Text

On This Page

Contribute

Join Us on Discord

Eldora UI

Get latest updates and support
and get help from our community

Join Now

Trusted by 1,000+ developers

GitHub Inline Comments

GitHub-style inline diff comments component with hover-to-reveal comment buttons and interactive discussion threads.

Open in

src/server.ts

modified

```
 @@ -10,8 +10,10 @@
```

1010

 export async function getUserName(id: string) {

1111
```
   // Fetch user from cache or database
```
12
```
-  const user = cache.get(id)
```
12
```
+  let user = cache.get(id)
```
1313
```
   if (!user) {
```
14
```
+    user = await db.users.findById(id)
```
15
```
+    if (user) cache.set(id, user)
```
1416
```
   }
```
15
```
-  return user?.name
```
17
```
+  return user?.name ?? '(unknown)'
```
1618
```
 }
```

"use client"

import GithubInlineComments from "@/registry/eldoraui/github-inline-comments"

export function GithubInlineCommentsDemo() {
  return (
    <div className="mx-auto max-w-4xl p-4">
      <p className="text-muted-foreground mb-4 text-sm">
        This is a GitHub-style inline diff comments component. Hover over a line
        in the diff to reveal the &quot;Add comment&quot; button, then click to
        open a compact inline thread for discussion—just like reviewing code on
        GitHub.
      </p>
      <GithubInlineComments
        fileName="src/server.ts"
        diff={[
          { kind: "hunk", content: "@@ -10,8 +10,10 @@" },
          {
            kind: "context",
            old: 10,
            new: 10,
            content: "export async function getUserName(id: string) {",
          },
          {
            kind: "context",
            old: 11,
            new: 11,
            content: "  // Fetch user from cache or database",
          },
          {
            kind: "del",
            old: 12,
            new: null,
            content: "  const user = cache.get(id)",
          },
          {
            kind: "add",
            old: null,
            new: 12,
            content: "  let user = cache.get(id)",
          },
          { kind: "context", old: 13, new: 13, content: "  if (!user) {" },
          {
            kind: "add",
            old: null,
            new: 14,
            content: "    user = await db.users.findById(id)",
          },
          {
            kind: "add",
            old: null,
            new: 15,
            content: "    if (user) cache.set(id, user)",
          },
          { kind: "context", old: 14, new: 16, content: "  }" },
          { kind: "del", old: 15, new: null, content: "  return user?.name" },
          {
            kind: "add",
            old: null,
            new: 17,
            content: "  return user?.name ?? '(unknown)'",
          },
          { kind: "context", old: 16, new: 18, content: "}" },
        ]}
      />
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @eldoraui/github-inline-comments

Usage

import GithubInlineComments from "@/components/eldoraui/github-inline-comments"

<GithubInlineComments
  fileName="src/server.ts"
  diff={[
    { kind: "hunk", content: "@@ -10,8 +10,10 @@" },
    { kind: "context", old: 10, new: 10, content: "export async function getUserName(id: string) },
    { kind: "del", old: 12, new: null, content: "  const user = cache.get(id)" },
    { kind: "add", old: null, new: 12, content: "  let user = cache.get(id)" },
  ]}
/>

Props

Prop	Type	Default	Description
`diff`	`readonly Line[]`	`-`	Array of diff lines to display
`fileName`	`string`	`-`	Name of the file being displayed

Line Types

Type	Description
`hunk`	Diff hunk header (e.g., `@@ -10,8 +10,10 @@`)
`context`	Unchanged line with old and new line numbers
`add`	Added line (new line number, old is null)
`del`	Deleted line (old line number, new is null)

Font Weight Text Gradual Spacing Text

On This Page

Contribute

Join Us on Discord

Eldora UI

Get latest updates and support
and get help from our community

Join Now

Trusted by 1,000+ developers