> ## 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. # File Structure > Understanding the threaded comments file organization # File Structure When you install threaded comments, approximately 25 TypeScript/TSX files are copied into your project in a clear, navigable structure. *** ## Directory Tree ``` src/components/comments-threaded/ ├── index.ts # Barrel export (entry point) ├── components/ # 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 │ │ ├── no-comments-placeholder.tsx │ │ └── 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.tsx │ │ ├── modal-background.tsx │ │ └── report-modal-content.tsx │ └── comment-menu-modal-owner/ # Owner actions │ └── comment-menu-modal-owner.tsx ├── hooks/ │ ├── use-threaded-comments.tsx # Main comment logic │ └── use-ui-state.tsx # UI state management ├── utils/ │ └── prop-comparison.ts # Memoization helpers └── context/ └── ui-state-context.tsx # Modal & theme context ``` *** ## Key Files ### `index.ts` — Entry Point Barrel export for clean imports: ```tsx theme={null} export { default as ThreadedCommentSection } from './components/threaded-comment-section'; ``` This lets you write: ```tsx theme={null} import { ThreadedCommentSection } from './components/comments-threaded'; ``` *** ### `threaded-comment-section.tsx` — Main Component The entry component that orchestrates everything. Edit this to: * Add custom headers or footers * Modify the overall layout * Change the component structure *** ### `new-comment-form.tsx` — Comment Input The textarea and submit button for top-level comments. Edit this to: * Customize placeholder text * Change button styles * Add character counters *** ### `single-comment.tsx` — Individual Comment The core comment display component. Edit this to: * Change author name styling * Modify comment body layout * Add custom badges or labels *** ### `vote-buttons.tsx` — Voting UI Upvote and downvote buttons with score display. Edit this to: * Change button colors * Modify vote count formatting * Change icon styles *** ### `use-threaded-comments.tsx` — Main Hook Contains all comment data logic and callbacks. This is where you customize behavior like: * `loginRequiredCallback` — Called when an unauthenticated user tries to comment * `usernameRequiredCallback` — Called when a user without a username tries to comment * `otherUserClickCallback` — Called when a user clicks on another user's name/avatar *** ## Common Customizations ### Change Colors **Inline Styles Variant:** Look for the color palette guide at the top of component files: ```tsx theme={null} /** * COLOR PALETTE * - #3B82F6 → Primary blue (votes, links) * - #EF4444 → Red (downvotes, delete) * - #111827 → #F9FAFB (text) * - #FFFFFF → #1F2937 (backgrounds) */ ``` Find and replace hex codes throughout the file. **Tailwind Variant:** Change utility classes directly: ```tsx theme={null} // Before