> ## 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.

# Configuration

> Understanding the replyke.json configuration file

# 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

```json theme={null}
{
  "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"`

Specifies your application platform. This determines which component variants are available, which peer dependencies are required, and platform-specific imports.

```json theme={null}
{ "platform": "react" }        // React web applications
{ "platform": "react-native" } // React Native mobile applications
{ "platform": "expo" }         // Expo-managed projects
```

***

### `style`

**Type:** `"tailwind"` | `"styled"`

Determines which styling approach to use for components.

<Tabs>
  <Tab title="tailwind">
    Components use Tailwind CSS utility classes.

    ```json theme={null}
    { "style": "tailwind" }
    ```

    **Requires:** Tailwind CSS installed in your project

    ```tsx theme={null}
    <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, design systems, developers who prefer utility-first CSS
  </Tab>

  <Tab title="styled (Inline Styles)">
    Components use inline `style={{}}` objects.

    ```json theme={null}
    { "style": "styled" }
    ```

    **Requires:** Nothing additional

    ```tsx theme={null}
    <div style={{
      backgroundColor: theme === 'dark' ? '#1F2937' : '#FFFFFF',
      padding: '16px',
      borderRadius: '8px'
    }}>
      <span style={{ color: '#2563EB', fontWeight: 'bold' }}>Username</span>
    </div>
    ```

    **Best for:** Projects without Tailwind, explicit self-contained styling
  </Tab>
</Tabs>

<Warning>
  Once you've added components with a specific style variant, switching requires re-installing them. Change `style` in `replyke.json`, delete the installed component directory, then re-run `add`.
</Warning>

***

### `typescript`

**Type:** `boolean` — Default: `true` (auto-detected)

Indicates whether your project uses TypeScript. Automatically detected from `tsconfig.json` or file extensions. You rarely need to change this manually.

```json theme={null}
{ "typescript": true }   // .tsx files
{ "typescript": false }  // .jsx files (types are stripped during installation)
```

***

### `paths`

**Type:** `object`

Configures where components are installed.

```json theme={null}
{
  "paths": {
    "components": "src/components"
  }
}
```

Components install at:

* `src/components/comments-threaded/`
* `src/components/comments-social/`

Use any path relative to your project root. The CLI creates the directory if it doesn't exist.

***

### `aliases`

**Type:** `object`

Path aliases used in component imports. These should match your `tsconfig.json` paths or bundler alias configuration.

```json theme={null}
{
  "aliases": {
    "@/components": "./src/components"
  }
}
```

Components will use imports like:

```tsx theme={null}
import { SomeUtil } from '@/components/utils';
```

<Warning>
  Aliases must match your `tsconfig.json` or bundler config. Mismatched aliases cause import errors.
</Warning>

***

## Complete Example

A typical `replyke.json` for a React web app with Tailwind CSS:

```json theme={null}
{
  "platform": "react",
  "style": "tailwind",
  "typescript": true,
  "paths": {
    "components": "src/components"
  },
  "aliases": {
    "@/components": "./src/components"
  }
}
```

***

## Platform-Specific Notes

### React (Web)

```json theme={null}
{ "platform": "react" }
```

Required dependency: `@replyke/react-js@^7.0.0`

Available components: Threaded comments ✅, Social comments ✅, Notification control ✅

***

### React Native

```json theme={null}
{ "platform": "react-native" }
```

Required dependency: `@replyke/react-native@^7.0.0`

Available components: Threaded comments ✅, Social comments ✅

***

### Expo

```json theme={null}
{ "platform": "expo" }
```

Required dependency: `@replyke/expo@^7.0.0`

Available components: Threaded comments ✅, Social comments ✅

***

## Changing Configuration

**Option 1 — Edit manually:** Update `replyke.json` directly, then delete and re-add any installed components.

```bash theme={null}
rm -rf src/components/comments-threaded
npx @replyke/cli add comments-threaded
```

**Option 2 — Re-initialize:** Delete `replyke.json` and run `init` again.

```bash theme={null}
rm replyke.json
npx @replyke/cli init
```

***

## FAQ

<AccordionGroup>
  <Accordion title="Can I use both styling variants in the same project?" icon="question">
    No, the configuration applies globally. Pick one approach for consistency.
  </Accordion>

  <Accordion title="What if I delete replyke.json?" icon="trash">
    The CLI will error when you try to `add` components. Run `npx @replyke/cli init` to recreate it.
  </Accordion>

  <Accordion title="Does this file affect my application at runtime?" icon="play">
    No. `replyke.json` is only used by the CLI during component installation. Your application never reads this file.
  </Accordion>
</AccordionGroup>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Quick Start Guide" icon="rocket" href="/v7/components/installation/quick-start">
    Add your first component
  </Card>

  <Card title="Threaded Comments" icon="comments" href="/v7/components/components/threaded/installation">
    Install Reddit-style threaded comments
  </Card>

  <Card title="Social Comments" icon="heart" href="/v7/components/components/social/installation">
    Install Instagram-style social comments
  </Card>

  <Card title="Customization Guide" icon="paintbrush" href="/v7/components/customization/overview">
    Learn how to customize components
  </Card>
</CardGroup>