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

# Customization Overview

> Customize components to match your brand

# Customization

Since you own the source code, you can customize **everything**: colors, layout, typography, functionality, and more.

***

## Philosophy

The CLI approach enables true customization:

<CardGroup cols={2}>
  <Card title="Edit, Don't Configure" icon="code">
    Customize by editing source files, not passing complex config objects.
  </Card>

  <Card title="Full Ownership" icon="key">
    The code lives in your project. Change anything you want.
  </Card>

  <Card title="No Limitations" icon="unlock">
    Not restricted to what props expose. Modify layout, logic, features.
  </Card>

  <Card title="Self-Documenting" icon="book">
    Clear file names, inline comments, and color palettes documented in headers.
  </Card>
</CardGroup>

***

## What You Can Customize

<AccordionGroup>
  <Accordion title="Colors & Theming" icon="palette">
    Change any color: backgrounds, text, buttons, icons, borders.

    * Inline styles: Find and replace hex codes
    * Tailwind: Change utility classes or extend config

    See [Colors & Theming](/v7/components/customization/colors-theming)
  </Accordion>

  <Accordion title="Layout & Structure" icon="table-columns">
    Rearrange, add, or remove UI elements.

    * Add custom headers/footers
    * Remove features you don't need
    * Change component ordering
    * Modify spacing and sizing

    See [Layout & Structure](/v7/components/customization/layout-structure)
  </Accordion>

  <Accordion title="Styling Variants" icon="wand-magic-sparkles">
    Switch between inline styles and Tailwind CSS.

    See [Styling Variants](/v7/components/customization/styling-variants)
  </Accordion>

  <Accordion title="Functionality" icon="gears">
    Modify behavior and add features.

    * Add confirmation dialogs
    * Change interaction logic
    * Integrate with your analytics
    * Wire to your auth system

    See [Adding Features](/v7/components/customization/adding-features)
  </Accordion>

  <Accordion title="Typography" icon="font">
    Change fonts, sizes, weights, and line heights throughout any component file.
  </Accordion>

  <Accordion title="Icons & Assets" icon="image">
    Replace icons with your own or use an icon library (Font Awesome, Heroicons, etc.).
  </Accordion>
</AccordionGroup>

***

## Quick Examples

### Change Primary Color (Inline Styles)

```tsx theme={null}
// File: components/comments-threaded/components/single-comment/vote-buttons.tsx

// Find:
<button style={{ color: '#3B82F6' }}>

// Replace with:
<button style={{ color: '#9333EA' }}>  // Purple
```

### Change Primary Color (Tailwind)

```tsx theme={null}
// File: components/comments-threaded/components/single-comment/vote-buttons.tsx

// Find:
<button className="text-blue-600 hover:text-blue-700">

// Replace with:
<button className="text-purple-600 hover:text-purple-700">
```

### Add Custom Header

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

return (
  <div>
    <div className="flex justify-between items-center mb-4">
      <h2 className="text-2xl font-bold">Discussion</h2>
      <span className="text-gray-500">{totalComments} comments</span>
    </div>

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

### Remove a Feature

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

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

***

## Where to Make Changes

| What to Change | Where to Look                                                          |
| -------------- | ---------------------------------------------------------------------- |
| Colors         | Search for hex codes (`#3B82F6`) or Tailwind classes (`text-blue-600`) |
| Layout         | Main component file (`threaded-comment-section.tsx`, etc.)             |
| Typography     | Any component file — search `fontSize` or `text-` classes              |
| Behavior       | Component files and the `hooks/` directory                             |
| Icons          | Search for Unicode symbols or icon component names                     |

***

## Tips

<Steps>
  <Step title="Read Color Palette Guides">
    Many component files have color palette documentation in their headers:

    ```tsx theme={null}
    /**
     * COLOR PALETTE
     * - #3B82F6 → Primary blue (upvotes, links)
     * - #EF4444 → Red (downvotes, delete)
     */
    ```
  </Step>

  <Step title="Use Find & Replace">
    To change a color globally across the component:

    * Find: `#3B82F6`
    * Replace: `#9333EA`
    * Scope: `components/comments-threaded/`
  </Step>

  <Step title="Test Incrementally">
    Make one change at a time. Easier to debug if something breaks.
  </Step>

  <Step title="Version Control">
    Commit changes frequently so you can revert if needed.

    ```bash theme={null}
    git add src/components/comments-threaded/
    git commit -m "Change primary color to purple"
    ```
  </Step>
</Steps>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Colors & Theming" icon="palette" href="/v7/components/customization/colors-theming">
    Customize colors and dark mode
  </Card>

  <Card title="Layout & Structure" icon="table-columns" href="/v7/components/customization/layout-structure">
    Modify layout and add/remove elements
  </Card>

  <Card title="Styling Variants" icon="wand-magic-sparkles" href="/v7/components/customization/styling-variants">
    Inline styles vs Tailwind CSS
  </Card>

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