Skip to main content

​
Installing Threaded Comments

Add Reddit-style threaded comments to your project with a single command.

​
Prerequisites

Before installing, make sure you’ve completed the CLI setup:
1

Initialize CLI

npx @replyke/cli init
This creates your replyke.json configuration file.
2

Install Dependencies

npm install @replyke/react-js @replyke/ui-core-react-js
Required for React (Web). The CLI will check for these.
See the CLI Setup Guide for details.

​
Installation Command

Run the add command in your project directory: 
npx @replyke/cli add comments-threaded

​
What Gets Installed

The CLI will:
  1. Fetch the component from the registry (based on your replyke.json config)
  2. Copy ~25 files into your project at {componentsPath}/comments-threaded/
  3. Transform imports to work with your project structure
  4. Create index.ts barrel export for clean imports
  5. Display usage examples and required dependencies

​
File Structure Created

src/components/comments-threaded/          # Your componentsPath
├── index.ts                                # Barrel export (entry point)
├── components/                             # All UI components (20 files)
│   ├── threaded-comment-section.tsx       # Main component
│   ├── new-comment-form.tsx               # Top-level comment form
│   ├── mention-suggestions.tsx            # @ mention autocomplete
│   ├── comments-feed/
│   │   ├── comments-feed.tsx              # Feed container
│   │   ├── loaded-comments.tsx            # Renders comment list
│   │   ├── fetching-comments-skeletons.tsx # Loading states
│   │   ├── no-comments-placeholder.tsx    # Empty state
│   │   └── comment-thread/
│   │       ├── comment-thread.tsx         # Thread with replies
│   │       ├── comment-replies.tsx        # Reply list
│   │       ├── action-menu.tsx            # Edit/delete/report menu
│   │       ├── new-reply-form.tsx         # Reply form
│   │       └── single-comment/
│   │           ├── single-comment.tsx     # Individual comment
│   │           ├── vote-buttons.tsx       # Upvote/downvote
│   │           ├── reply-button-and-info.tsx
│   │           ├── toggle-replies-visibility.tsx
│   │           └── indentation-threading-lines.tsx
│   └── modals/
│       ├── comment-menu-modal/            # Report modal (3 files)
│       └── comment-menu-modal-owner/      # Owner actions (1 file)
├── hooks/                                  # React hooks (2 files)
│   ├── use-threaded-comments.tsx          # Main comment logic hook
│   └── use-ui-state.tsx                   # UI state management
├── utils/                                  # Utilities (1 file)
│   └── prop-comparison.ts                 # Memoization helpers
└── context/                                # React context (1 file)
    └── ui-state-context.tsx               # Modal & theme context
Total: ~25 TypeScript/TSX files

​
CLI Output Example

$ npx @replyke/cli add comments-threaded

✅ Successfully installed comments-threaded!

📁 Files added to: src/components/comments-threaded/
📦 Total files: 25

Required dependencies:
  - @replyke/react-js@^6.0.0
  - @replyke/ui-core-react-js@^6.0.0

Usage:
  import { ThreadedCommentSection } from './components/comments-threaded';

  <ThreadedCommentSection entityId="your-entity-id" />

Next steps:
  1. Wrap your app with <ReplykeProvider>
  2. Import and use the component
  3. Customize by editing the source files directly

​
Using the Component

After installation, import and use the component: 
import { ThreadedCommentSection } from './components/comments-threaded';

function BlogPost({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <article>{post.content}</article>

      {/* Add threaded comments */}
      <ThreadedCommentSection
        entityId={post.id}
      />
    </div>
  );
}
Make sure your app is wrapped with <ReplykeProvider>. See the Quick Start Guide for setup details.

​
Customization

All source files are now in your project and fully editable. Change anything you want: Change colors: 
// Edit: src/components/comments-threaded/components/single-comment/single-comment.tsx

<span style={{
  color: '#9333EA' // Changed from default blue
}}>
  {author.name}
</span>
Modify layout: 
// Edit: src/components/comments-threaded/components/threaded-comment-section.tsx

return (
  <div>
    {/* Add custom header */}
    <h2>Discussion ({totalComments} comments)</h2>

    <NewCommentForm />
    <CommentsFeed />
  </div>
);
See the Customization Guide for more examples.

​
Switching Styling Variants

If you want to switch between Tailwind and Inline Styles after installation:
1

Delete Current Components

rm -rf src/components/comments-threaded
2

Update Configuration

Edit replyke.json:
{
  "style": "styled"  // Change "tailwind" to "styled" or vice versa
}
3

Re-install

npx @replyke/cli add comments-threaded
This will replace your component files. If you’ve made customizations, back them up first!

​
Verification

After installation, verify everything works:
1

Check Files Exist

ls src/components/comments-threaded
# Should show: index.ts, components/, hooks/, utils/, context/
2

Try Importing

import { ThreadedCommentSection } from './components/comments-threaded';
// Should have no TypeScript errors
3

Run Your Dev Server

npm run dev
The component should render without errors.

​
Troubleshooting

Threaded comments are currently only available for React (Web).Check your replyke.json:
{
  "platform": "react"  // Must be "react" for threaded comments
}
For React Native/Expo, use Social Comments instead.
Make sure your import path matches your componentsPath:
// If componentsPath is "src/components"
import { ThreadedCommentSection } from './components/comments-threaded';

// If componentsPath is "app/ui"
import { ThreadedCommentSection } from './ui/comments-threaded';
Ensure your tsconfig.json includes the components directory:
{
  "include": ["src/**/*"]
}
The CLI won’t overwrite existing files. To reinstall:
rm -rf src/components/comments-threaded
npx @replyke/cli add comments-threaded

​
Next Steps

Props & API

Learn about available props

File Structure

Understand the component organization

Customization

Customize colors, layout, and functionality

Features

Explore all features