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 lives in your project. Change anything you want.

No Limitations

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

Self-Documenting

Clear file names, inline comments, and color palettes documented 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.See Styling Variants

Functionality

Modify behavior and add features.

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

See Adding Features

Typography

Change fonts, sizes, weights, and line heights throughout any component file.

Icons & Assets

Replace icons with your own or use an icon library (Font Awesome, Heroicons, etc.).

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

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

Read Color Palette Guides

Many component files have color palette documentation in their headers:

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

Use Find & Replace

To change a color globally across the component:

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

Test Incrementally

Make one change at a time. 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

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 a Feature

Where to Make Changes

Tips

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 a Feature

​Where to Make Changes

​Tips

​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 a Feature

Where to Make Changes

Tips

Next Steps