Skip to main content

​
Layout & Structure

Rearrange, add, or remove UI elements directly in the source files.

​
Adding Elements

​
Add Custom Header

// File: threaded-comment-section.tsx

return (
  <div>
    {/* Custom header */}
    <div className="flex justify-between items-center mb-4">
      <h2>Discussion ({totalComments} comments)</h2>
      <button onClick={sortBy}>Sort</button>
    </div>

    <NewCommentForm />
    <CommentsFeed />
  </div>
);

return (
  <div>
    <NewCommentForm />
    <CommentsFeed />

    {/* Custom footer */}
    <footer className="text-center text-gray-500 mt-4 text-sm">
      Powered by Sublay
    </footer>
  </div>
);

​
Add a Banner Between Form and Feed

return (
  <div>
    <NewCommentForm />

    {/* Custom banner */}
    <div className="bg-blue-50 dark:bg-blue-950 rounded p-3 my-3 text-sm text-blue-700 dark:text-blue-300">
      Be respectful. See our community guidelines.
    </div>

    <CommentsFeed />
  </div>
);

​
Removing Elements

​
Remove Vote Buttons

// File: single-comment.tsx

return (
  <div>
    <AuthorInfo />
    <CommentBody />
    {/* <VoteButtons /> */}
    <ReplyButton />
  </div>
);

​
Remove Reply Functionality

return (
  <div>
    <AuthorInfo />
    <CommentBody />
    <VoteButtons />
    {/* <ReplyButton /> */}
  </div>
);

​
Remove Moderation Options

Delete or comment out the action menu trigger in single-comment.tsx: 
{/* <ActionMenu comment={comment} /> */}

​
Rearranging Elements

​
Move Vote Buttons Above Comment Body

// Before
<AuthorInfo />
<CommentBody />
<VoteButtons />

// After
<AuthorInfo />
<VoteButtons />  {/* Moved up */}
<CommentBody />

​
Move Sort Controls

Move <SortByButton /> to the top of the section instead of inline with the feed.

​
Modifying Spacing

Inline Styles: 
<div style={{ padding: '24px', gap: '16px' }}>  {/* Increased from 12px */}
Tailwind: 
<div className="p-6 gap-4">  {/* p-4 → p-6 */}

​
Component Hierarchy

Understanding the component tree helps you know which file to edit: Threaded Comments: 
ThreadedCommentSection        ← threaded-comment-section.tsx
  ├── NewCommentForm           ← new-comment-form.tsx
  └── CommentsFeed             ← comments-feed.tsx
        └── CommentThread      ← comment-thread.tsx
              └── SingleComment ← single-comment.tsx
                    ├── AuthorInfo
                    ├── CommentBody
                    ├── VoteButtons   ← vote-buttons.tsx
                    └── ReplyButton
Social Comments: 
SocialCommentSection          ← social-comment-section.tsx
  ├── SortByButton             ← sort-by-button.tsx
  ├── NewCommentForm           ← new-comment-form.tsx
  └── CommentsFeed             ← comments-feed.tsx
        └── Comment            ← comment.tsx
              ├── HeartButton  ← heart-button.tsx
              └── Replies      ← replies.tsx

​
Next Steps

Adding Features

Add custom functionality

Colors & Theming

Customize colors

Advanced

Advanced customization techniques

File Structure

Threaded comments file organization