> ## Documentation Index
> Fetch the complete documentation index at: https://replyke-feat-push-rich-payload-fields.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Layout & Structure

> Modify component layout and structure

# Layout & Structure

Rearrange, add, or remove UI elements.

***

## Adding Elements

### Add Custom Header

```tsx theme={null}
// File: threaded-comment-section.tsx

return (
  <div>
    {/* Add 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>
);
```

### Add Custom Footer

```tsx theme={null}
return (
  <div>
    <NewCommentForm />
    <CommentsFeed />

    {/* Add footer */}
    <footer className="text-center text-gray-500 mt-4">
      Powered by Replyke
    </footer>
  </div>
);
```

***

## Removing Elements

### Remove Vote Buttons

```tsx theme={null}
// File: single-comment.tsx

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

### Remove Reply Functionality

```tsx theme={null}
// File: single-comment.tsx

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

***

## Rearranging Elements

### Move Reply Button Above Comment Body

```tsx theme={null}
// Before
<AuthorInfo />
<CommentBody />
<ReplyButton />

// After
<AuthorInfo />
<ReplyButton />  {/* Moved up */}
<CommentBody />
```

***

## Modifying Spacing

**Inline Styles:**

```tsx theme={null}
<div style={{ padding: '24px' }}>  {/* Was 16px */}
```

**Tailwind:**

```tsx theme={null}
<div className="p-6">  {/* Was p-4 */}
```

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Adding Features" icon="plus" href="/components/customization/adding-features">
    Add custom functionality
  </Card>

  <Card title="Colors & Theming" icon="palette" href="/components/customization/colors-theming">
    Customize colors
  </Card>
</CardGroup>