Skip to main content

​
Replyke Components

Replyke has fundamentally changed how developers add comment systems to their applications. We’ve moved from the traditional npm package approach to a CLI-based component distribution system inspired by shadcn/ui.
The new philosophy: Copy, paste, customize. Not install and configure.You get source code, not packages. You own your components and can modify anything.

​
Why the Change?

The old npm package approach had significant limitations:
Components were black boxes in node_modules. Users couldn’t see or modify the internal structure, logic, or sub-components without forking the entire package.
Only surfaces exposed via styleCallbacks prop could be customized. Want to change the layout? Add a new feature? Remove an element? Not possible without forking.
Styling required passing dozens of callback functions, creating verbose and hard-to-maintain code. Simple color changes needed complex configuration objects.
The code lived in node_modules, not in your source control. Updates risked breaking changes. You were locked into the package’s design decisions.

​
The New Approach

With the CLI-based system, you get complete control:

​
How It Works

1

Initialize Replyke

npx @replyke/cli init
Configure your platform (React/React Native), styling preference (Tailwind/Inline), and component installation path.
2

Add Components

npx @replyke/cli add comments-threaded
# or
npx @replyke/cli add comments-social
Components are copied directly into your src/components/ directory.
3

Use & Customize

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

<ThreadedCommentSection entityId="my-post-123" />
The component works out of the box. Want to customize? Just edit the source files directly.

​
Benefits

Old Approach (npm)New Approach (CLI)
Components hidden in node_modulesSource code in your project
Limited to styleCallbacks propEdit source code directly
Dozens of callback functionsMinimal props
Can’t modify layout or logicFull control over everything
Package updates may break thingsYou control when and how to update
Not in version controlCommitted to your repo

​
Available Components

Threaded Comments

Reddit-style threaded discussions with:
  • Unlimited nesting depth
  • Upvote/downvote system
  • Visual threading lines
  • Collapsible threads
Best for: Forums, technical discussions, detailed conversations

Social Comments

Instagram-style social comments with:
  • Single-level nesting
  • Heart/like system
  • Clean, minimal design
  • Top/New/Old sorting
Best for: Social platforms, media content, quick interactions

Notification Control

Dropdown notification bell control with:
  • Real-time notification updates
  • Smart viewport positioning
  • Mark as read functionality
  • Infinite scroll
Best for: Navigation bars, headers, notification systems

​
Styling Options

Each component comes in two styling variants:

​
Inline Styles

  • All styles as style={{}} objects in JSX
  • No external dependencies
  • Works everywhere
  • Easy to find and change colors
  • Theme support via conditional logic

​
Tailwind CSS

  • Utility classes for styling
  • Requires Tailwind CSS installed
  • Dark mode via dark: prefix
  • More concise code
  • Easy to integrate with design systems
Choose during init — you can always switch by re-installing components.

​
What Gets Installed

When you add a component, you get approximately 25 TypeScript/TSX files: 
src/components/comments-threaded/
├── index.ts                    # Entry point
├── components/                 # All UI components (20 files)
│   ├── threaded-comment-section.tsx
│   ├── new-comment-form.tsx
│   ├── comments-feed/
│   └── modals/
├── hooks/                      # React hooks (2 files)
├── utils/                      # Utilities
└── context/                    # React context
Every file is:
  • ✅ Visible in your project
  • ✅ Editable
  • ✅ TypeScript with full type annotations
  • ✅ Documented with inline comments

​
Required Dependencies

Components are not standalone. They depend on Replyke’s core libraries for:
  • Comment data fetching & caching
  • Real-time updates
  • Authentication integration
  • Vote/like handling
  • Moderation actions
For React (Web): 
{
  "dependencies": {
    "@replyke/react-js": "^6.0.0",
    "@replyke/ui-core-react-js": "^6.0.0"
  }
}
For React Native / Expo: 
{
  "dependencies": {
    "@replyke/react-native": "^6.0.0",  // or @replyke/expo
    "@replyke/ui-core-react-native": "^6.0.0"
  }
}
The CLI checks for these and offers to install them during init.

​
Getting Started

Installation Guide

Set up the CLI and configure your project

Quick Start

Get comments working in under 5 minutes

Customization

Learn how to customize colors, layout, and functionality

Migration Guide

Migrate from old npm packages to CLI

​
Philosophy

The Replyke CLI follows these principles:
  1. Minimal Props - Components work with just entityId. No complex configuration required.
  2. Sensible Defaults - Beautiful, accessible styling out of the box.
  3. Edit, Don’t Configure - Customize by editing source code, not passing config objects.
  4. Progressive Disclosure - Ignore implementation details until you need to customize.
  5. Self-Documenting Code - Clear file names, thorough comments, and color palettes documented in headers.

​
Open Source

All components are open source under the Apache 2.0 license. You can:
  • Fork and modify freely
  • Publish your own variants
  • Contribute improvements back to the community
  • Use in commercial projects
GitHub Repository: github.com/replyke/cli

​
Legacy Documentation

Looking for the old npm package documentation? See the Legacy (Deprecated) section.
The old npm package approach (@replyke/comments-threaded-react-js, @replyke/comments-social-react-js) is deprecated. We recommend migrating to the CLI-based system for better customization and control.