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>
);

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 */}

GIF Picker Placement

The GIF picker opens over the comment section and covers all of it: the comment list and the form. To make it cover the whole screen instead, pass gifPickerFullScreen to the section:

<ThreadedCommentSection foreignId="post_123" gifPickerFullScreen />

SocialCommentSection takes the same prop. The default is false. It works the same on React, React Native and Expo.

React

The picker fills the section’s outer element, which is positioned (relative), so it is as tall as the section. Give the section a bounded height (it fills its parent and scrolls the comment list inside) to keep the picker’s search field on screen in a long thread. If you compose your own layout from the feed and the form, wrap them in a positioned element, or the picker will cover the nearest positioned ancestor instead. The prop goes on the form:

<div className="relative">
  <CommentsFeed />
  <NewCommentForm gifPickerFullScreen={false} />
</div>

React Native and Expo

The picker fills the view it is rendered in, and the form renders it. In the section, the form is a direct child of the section’s root view, so the picker covers the whole section. The section’s border around the form is passed to the form as containerStyle (containerClassName in the Tailwind variant) rather than wrapped around it, because a wrapping view would become the area the picker covers. With gifPickerFullScreen, the picker opens in a React Native Modal: it covers the whole screen wherever the section sits in your app (inside a bottom sheet, for example), and Android’s back button closes it. Its content is inset from the notch and the home indicator with React Native’s SafeAreaView, which applies insets on iOS only. If your app uses react-native-safe-area-context, swap in its SafeAreaView in giphy-container.tsx to get insets on Android too. If you compose your own layout, render the form as a direct child of the view the picker should cover. The prop goes on the form:

<View style={{ flex: 1 }}>
  <ScrollView style={{ flex: 1 }}>
    <CommentsFeed />
  </ScrollView>
  <NewCommentForm gifPickerFullScreen={false} />
</View>

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

Overview

Installation

Component Types

Threaded Comments

Social Comments

Notification Control

Customization

Layout & Structure

Layout & Structure

Adding Elements

Add Custom Header

Add Custom Footer

Add a Banner Between Form and Feed

Removing Elements

Remove Vote Buttons

Remove Reply Functionality

Remove Moderation Options

Rearranging Elements

Move Vote Buttons Above Comment Body

Move Sort Controls

Modifying Spacing

GIF Picker Placement

React

React Native and Expo

Component Hierarchy

Next Steps

Adding Features

Colors & Theming

Advanced

File Structure

​Layout & Structure

​Adding Elements

​Add Custom Header

​Add Custom Footer

​Add a Banner Between Form and Feed

​Removing Elements

​Remove Vote Buttons

​Remove Reply Functionality

​Remove Moderation Options

​Rearranging Elements

​Move Vote Buttons Above Comment Body

​Move Sort Controls

​Modifying Spacing

​GIF Picker Placement

​React

​React Native and Expo

​Component Hierarchy

​Next Steps

Adding Features

Colors & Theming

Advanced

File Structure

Layout & Structure

Adding Elements

Add Custom Header

Add Custom Footer

Add a Banner Between Form and Feed

Removing Elements

Remove Vote Buttons

Remove Reply Functionality

Remove Moderation Options

Rearranging Elements

Move Vote Buttons Above Comment Body

Move Sort Controls

Modifying Spacing

GIF Picker Placement

React

React Native and Expo

Component Hierarchy

Next Steps