Customization

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

Philosophy

The CLI approach enables true customization:

Edit, Don't Configure

Customize by editing source files, not passing complex config objects.

Full Ownership

The code is in your project. Change anything you want.

No Limitations

Not restricted to what props expose. Modify layout, logic, features.

Self-Documenting

Components have clear file names, comments, and color palettes in headers.

What You Can Customize

Colors & Theming

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

Layout & Structure

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

Styling Variants

Switch between inline styles and Tailwind CSS.

Understand differences
When to use each
How to convert between them

See Styling Variants

Functionality Changes

Modify behavior and add features.

Add confirmation dialogs
Change interaction logic
Integrate with your systems
Add analytics tracking

See Adding Features

Typography

Change fonts, sizes, weights, line heights.

Custom font families
Adjust text sizing
Modify spacing
Change text styles

Icons & Assets

Replace icons with your own or use an icon library.

Swap Unicode symbols with icon components
Use your icon library (Font Awesome, Heroicons, etc.)
Add custom graphics

Quick Examples

Change Primary Color (Inline Styles)

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

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

// File: components/comments-threaded/components/threaded-comment-section.tsx

return (
  <div>
    {/* Add custom header */}
    <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 Feature

// 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 files (threaded-comment-section.tsx, etc.)
Typography	Any component file (search for fontSize, className with text-)
Functionality	Component files and hooks/ directory
Icons	Search for Unicode symbols (▲, ❤️) or icon elements

Tips for Customization

Read Color Palette Guides

Many component files have color palette guides in their headers. Use these as reference.

/**
 * COLOR PALETTE
 * - #3B82F6 → Primary blue (upvotes, links)
 * - #EF4444 → Red (downvotes, delete)
 */

Use Find & Replace

To change colors globally, use your editor’s find & replace:

Find: #3B82F6
Replace: #9333EA
Scope: components/comments-threaded/

Test Incrementally

Make one change at a time and test. Easier to debug if something breaks.

Version Control

Commit changes frequently so you can revert if needed.

git add src/components/comments-threaded/
git commit -m "Change primary color to purple"

Next Steps

Colors & Theming

Customize colors and dark mode

Layout & Structure

Modify layout and add/remove elements

Styling Variants

Inline styles vs Tailwind CSS

Adding Features

Add custom functionality

Overview

Installation

Component Types

Threaded Comments

Social Comments

Notification Control

Customization

Migration

Legacy (Deprecated)

Customization Overview

Customization

Philosophy

Edit, Don't Configure

Full Ownership

No Limitations

Self-Documenting

What You Can Customize

Quick Examples

Change Primary Color (Inline Styles)

Change Primary Color (Tailwind)

Add Custom Header

Remove Feature

Where to Make Changes

Tips for Customization

Next Steps

Colors & Theming

Layout & Structure

Styling Variants

Adding Features

​Customization

​Philosophy

Edit, Don't Configure

Full Ownership

No Limitations

Self-Documenting

​What You Can Customize

​Quick Examples

​Change Primary Color (Inline Styles)

​Change Primary Color (Tailwind)

​Add Custom Header

​Remove Feature

​Where to Make Changes

​Tips for Customization

​Next Steps

Colors & Theming

Layout & Structure

Styling Variants

Adding Features

Customization

Philosophy

What You Can Customize

Quick Examples

Change Primary Color (Inline Styles)

Change Primary Color (Tailwind)

Add Custom Header

Remove Feature

Where to Make Changes

Tips for Customization

Next Steps