Skip to main content

​
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

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
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
Switch between inline styles and Tailwind CSS.
  • Understand differences
  • When to use each
  • How to convert between them
See Styling Variants
Modify behavior and add features.
  • Add confirmation dialogs
  • Change interaction logic
  • Integrate with your systems
  • Add analytics tracking
See Adding Features
Change fonts, sizes, weights, line heights.
  • Custom font families
  • Adjust text sizing
  • Modify spacing
  • Change text styles
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 ChangeWhere to Look
ColorsSearch for hex codes (#3B82F6) or Tailwind classes (text-blue-600)
LayoutMain component files (threaded-comment-section.tsx, etc.)
TypographyAny component file (search for fontSize, className with text-)
FunctionalityComponent files and hooks/ directory
IconsSearch for Unicode symbols (▲, ❤️) or icon elements

​
Tips for Customization

1

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

Use Find & Replace

To change colors globally, use your editor’s find & replace:
  • Find: #3B82F6
  • Replace: #9333EA
  • Scope: components/comments-threaded/
3

Test Incrementally

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

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