Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.replyke.com/llms.txt

Use this file to discover all available pages before exploring further.

​
Installing Threaded Comments

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

​
Prerequisites

1

Initialize CLI

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

Install Dependencies

React (Web):
npm install @replyke/react-js @replyke/ui-core-react-js
React Native:
npm install @replyke/react-native @replyke/ui-core-react-native
Expo:
npm install @replyke/expo @replyke/ui-core-react-native
See the CLI Setup Guide for details.

​
Installation Command

npx @replyke/cli add comments-threaded

​
What Gets Installed

The CLI will:
  1. Fetch the component from the registry based on your replyke.json platform and style settings
  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/
├── 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/
│   ├── use-threaded-comments.tsx           # Main comment logic hook
│   └── use-ui-state.tsx                    # UI state management
├── utils/
│   └── prop-comparison.ts                  # Memoization helpers
└── context/
    └── ui-state-context.tsx               # Modal & theme context

​
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>
      <ThreadedCommentSection entityId={post.id} />
    </div>
  );
}
Make sure your app is wrapped with <ReplykeProvider>. See the Quick Start Guide for setup details.

​
Switching Styling Variants

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"
}
3

Re-install

npx @replyke/cli add comments-threaded
This replaces your component files. Back up any customizations first.

​
Troubleshooting

Make sure your import path matches your paths.components in replyke.json:
// paths.components = "src/components"
import { ThreadedCommentSection } from './components/comments-threaded';
Ensure your tsconfig.json includes the components directory:
{ "include": ["src/**/*"] }
The CLI won’t overwrite existing files. Delete and re-add:
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