Skip to main content

​
Configuration File

The replyke.json file is created in your project root during initialization. It stores your preferences and is used by the CLI when adding components.

​
File Location

your-project/
├── package.json
├── replyke.json          ← Configuration file
├── src/
│   └── components/
└── ...

​
Configuration Schema

{
  "platform": "react" | "react-native" | "expo",
  "style": "tailwind" | "styled",
  "typescript": true | false,
  "paths": {
    "components": "src/components"
  },
  "aliases": {
    "@/components": "./src/components"
  }
}

​
Configuration Options

​
platform

Type: "react" | "react-native" | "expo" Description: Specifies your application platform. This determines:
  • Which component variants are available
  • Which peer dependencies are required
  • Platform-specific imports and syntax
Examples: 
{
  "platform": "react"
}
For React web applications. 
{
  "platform": "react-native"
}
For React Native mobile applications. 
{
  "platform": "expo"
}
For Expo-managed projects.

​
style

Type: "tailwind" | "styled" Description: Determines which styling approach to use for components. Options:
  • tailwind
  • styled (Inline Styles)
Components use Tailwind CSS utility classes.
{
  "style": "tailwind"
}
Requires: Tailwind CSS installed in your projectExample component code:
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg">
  <span className="text-blue-600 font-bold">Username</span>
</div>
Best for:
  • Projects already using Tailwind CSS
  • Design systems based on Tailwind
  • Developers who prefer utility-first CSS
Once you’ve added components with a specific style variant, switching requires re-installing the components. You can change style in replyke.json and then delete and re-add components.

​
typescript

Type: boolean Default: true (detected automatically) Description: Indicates whether your project uses TypeScript. This is automatically detected based on your project setup. Examples: 
{
  "typescript": true
}
For TypeScript projects (.tsx files). 
{
  "typescript": false
}
For JavaScript projects (.jsx files).
The CLI auto-detects this from your tsconfig.json or file extensions. You rarely need to change this manually.

​
paths

Type: object Description: Configures where different types of files should be installed. Properties:
  • components - The directory where CLI components will be installed
Examples: 
{
  "paths": {
    "components": "src/components"
  }
}
Components will be installed at:
  • src/components/comments-threaded/
  • src/components/comments-social/
{
  "paths": {
    "components": "app/ui/components"
  }
}
Components will be installed at:
  • app/ui/components/comments-threaded/
  • app/ui/components/comments-social/
Use a path relative to your project root. The CLI will create the directory if it doesn’t exist.

​
aliases

Type: object Description: Path aliases used in component imports. These match your project’s path resolution configuration (tsconfig.json paths or webpack aliases). Examples: 
{
  "aliases": {
    "@/components": "./src/components"
  }
}
Components will use imports like: 
import { SomeUtil } from '@/components/utils';

{
  "aliases": {
    "~/components": "./app/components"
  }
}
Components will use imports like: 
import { SomeUtil } from '~/components/utils';
Make sure these aliases match your tsconfig.json or bundler configuration. Mismatched aliases will cause import errors.

​
Complete Example

Here’s a typical replyke.json for a React web app using Tailwind CSS: 
{
  "platform": "react",
  "style": "tailwind",
  "typescript": true,
  "paths": {
    "components": "src/components"
  },
  "aliases": {
    "@/components": "./src/components"
  }
}

​
Changing Configuration

​
Option 1: Edit Manually

You can edit replyke.json directly: 
{
  "platform": "react",
  "style": "styled",  // Changed from "tailwind" to "styled"
  "typescript": true,
  "paths": {
    "components": "src/components"
  },
  "aliases": {
    "@/components": "./src/components"
  }
}
Then re-run add commands to install components with the new configuration.
If you’ve already added components, you’ll need to delete them first:
rm -rf src/components/comments-threaded
rm -rf src/components/comments-social

npx @replyke/cli add comments-threaded

​
Option 2: Re-initialize

Delete replyke.json and run init again: 
rm replyke.json
npx @replyke/cli init

​
Platform-Specific Notes

​
React (Web)

Platform value: "react" Required dependencies: 
{
  "dependencies": {
    "@replyke/react-js": "^6.0.0",
  }
}
Available components:
  • ✅ Threaded comments
  • ✅ Social comments

​
React Native

Platform value: "react-native" Required dependencies: 
{
  "dependencies": {
    "@replyke/react-native": "^6.0.0",
  }
}
Available components:
  • ⚠️ Threaded comments (in progress)
  • ✅ Social comments
Styling: Currently only "styled" (inline styles) is supported. Tailwind support coming soon.

​
Expo

Platform value: "expo" Required dependencies: 
{
  "dependencies": {
    "@replyke/expo": "^6.0.0",
  }
}
Available components:
  • ⚠️ Threaded comments (in progress)
  • ✅ Social comments
Styling: Currently only "styled" (inline styles) is supported.

​
FAQ

No, the configuration applies to all components. Pick one approach and stick with it for consistency.
The CLI will error when you try to add components. Simply run npx @replyke/cli init again to recreate it.
No, the CLI expects this specific schema. However, you can request new options by opening an issue on GitHub.
No, replyke.json is only used by the CLI during component installation. Your application doesn’t read or use this file.

​
Next Steps

Quick Start Guide

Add your first component

Add Threaded Comments

Install Reddit-style threaded comments

Add Social Comments

Install Instagram-style social comments

Customization Guide

Learn how to customize components