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

# Installing Threaded Comments

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

***

## Prerequisites

<Steps>
  <Step title="Initialize CLI">
    ```bash theme={null}
    npx @replyke/cli init
    ```

    Creates your `replyke.json` configuration file.
  </Step>

  <Step title="Install Dependencies">
    **React (Web):**

    ```bash theme={null}
    npm install @replyke/react-js @replyke/ui-core-react-js
    ```

    **React Native:**

    ```bash theme={null}
    npm install @replyke/react-native @replyke/ui-core-react-native
    ```

    **Expo:**

    ```bash theme={null}
    npm install @replyke/expo @replyke/ui-core-react-native
    ```
  </Step>
</Steps>

See the [CLI Setup Guide](/v7/components/installation/cli-setup) for details.

***

## Installation Command

```bash theme={null}
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:

```tsx theme={null}
import { ThreadedCommentSection } from './components/comments-threaded';

function BlogPost({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <article>{post.content}</article>
      <ThreadedCommentSection entityId={post.id} />
    </div>
  );
}
```

<Info>
  Make sure your app is wrapped with `<ReplykeProvider>`. See the [Quick Start Guide](/v7/components/installation/quick-start) for setup details.
</Info>

***

## Switching Styling Variants

To switch between Tailwind and Inline Styles after installation:

<Steps>
  <Step title="Delete Current Components">
    ```bash theme={null}
    rm -rf src/components/comments-threaded
    ```
  </Step>

  <Step title="Update Configuration">
    Edit `replyke.json`:

    ```json theme={null}
    {
      "style": "styled"
    }
    ```
  </Step>

  <Step title="Re-install">
    ```bash theme={null}
    npx @replyke/cli add comments-threaded
    ```
  </Step>
</Steps>

<Warning>
  This replaces your component files. Back up any customizations first.
</Warning>

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="Import errors" icon="file-import">
    Make sure your import path matches your `paths.components` in `replyke.json`:

    ```tsx theme={null}
    // paths.components = "src/components"
    import { ThreadedCommentSection } from './components/comments-threaded';
    ```
  </Accordion>

  <Accordion title="TypeScript errors" icon="code">
    Ensure your `tsconfig.json` includes the components directory:

    ```json theme={null}
    { "include": ["src/**/*"] }
    ```
  </Accordion>

  <Accordion title="Component already exists" icon="copy">
    The CLI won't overwrite existing files. Delete and re-add:

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

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Props & API" icon="sliders" href="/v7/components/components/threaded/props-api">
    Learn about available props
  </Card>

  <Card title="File Structure" icon="folder-tree" href="/v7/components/components/threaded/file-structure">
    Understand the component organization
  </Card>

  <Card title="Customization" icon="paintbrush" href="/v7/components/customization/overview">
    Customize colors, layout, and functionality
  </Card>

  <Card title="Features" icon="star" href="/v7/components/components/threaded/features">
    Explore all features
  </Card>
</CardGroup>