Skip to main content

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

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

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.See Styling Variants
Modify behavior and add features.
  • Add confirmation dialogs
  • Change interaction logic
  • Integrate with your analytics
  • Wire to your auth system
See Adding Features
Change fonts, sizes, weights, and line heights throughout any component file.
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 ChangeWhere to Look
ColorsSearch for hex codes (#3B82F6) or Tailwind classes (text-blue-600)
LayoutMain component file (threaded-comment-section.tsx, etc.)
TypographyAny component file — search fontSize or text- classes
BehaviorComponent files and the hooks/ directory
IconsSearch for Unicode symbols or icon component names

​
Tips

1

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

Use Find & Replace

To change a color globally across the component:
  • Find: #3B82F6
  • Replace: #9333EA
  • Scope: components/comments-threaded/
3

Test Incrementally

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