Styled Components

Live preview of StyledCommentSection. Add a comment, reply, react, edit, or delete to try it.

Submit

Alice30 minutes ago

The Styled preset uses CSS variables only — no Tailwind or Radix.

👍1

ReplyCopy link

Hide replies (1)

Bob15 minutes ago

Perfect for dropping into any stack.

😊

ReplyCopy link

Charlie1 hours ago

Theme it with --cs-primary-color, --cs-bg-color, and more.

😊

ReplyCopy link

Import the preset CSS and render StyledCommentSection. All data callbacks are synchronous: update your state and return the new comment.

import '@hasthiya_/headless-comments-react/presets/styled/styles.css';
import { StyledCommentSection, generateUniqueId, type Comment, type CommentUser } from '@hasthiya_/headless-comments-react';

const currentUser: CommentUser = {
  id: 'user-1',
  name: 'John Doe',
  avatarUrl: 'https://api.dicebear.com/7.x/pixel-art/svg?seed=JohnDoe',
  isVerified: true,
};

function App() {
  const [comments, setComments] = useState<Comment[]>([]);

  const handleSubmit = (content: string): Comment => {
    const newComment: Comment = {
      id: generateUniqueId(),
      content,
      author: currentUser,
      createdAt: new Date(),
      reactions: [{ id: 'like', label: 'Like', emoji: '👍', count: 0, isActive: false }],
      replies: [],
    };
    setComments((prev) => [newComment, ...prev]);
    return newComment;
  };

  return (
    <StyledCommentSection
      comments={comments}
      currentUser={currentUser}
      onSubmitComment={handleSubmit}
    />
  );
}

Override these custom properties in :root or a wrapper element to theme the Styled preset. All variable names use the --cs-* prefix to avoid clashes.

:root {
  --cs-primary-color: #8b5cf6;
  --cs-bg-color: #0f172a;
  --cs-text-color: #f8fafc;
  --cs-border-color: #334155;
}

The same stylesheet supports light and dark. Use one of these so the preset switches correctly:

• Add the class cs-root--dark to an ancestor of the comment section.
• Set data-cs-theme="dark" on the wrapper element.
• If your app uses a global .dark class (e.g. next-themes with attribute="class"), the Styled preset will follow it automatically.

<!-- Option 1: class on a wrapper -->
<div className="cs-root--dark">
  <StyledCommentSection ... />
</div>

<!-- Option 2: data attribute -->
<div data-cs-theme="dark">
  <StyledCommentSection ... />
</div>

StyledCommentSection accepts all standard CommentSection props (see the main docs Component API). In addition, these display props control the Styled preset UI:

• showSortBar (default true) — Show sort bar (newest / oldest / top)
• showReactions (default true) — Show reaction buttons
• showMoreOptions (default true) — More menu (reply, edit, delete, share, report)
• showVerifiedBadge (default true) — Verified badge next to author
• maxCommentLines — Max lines before truncating comment body
• inputPlaceholder, maxCharLimit, showCharCount, autoFocus
• maxDepth (default 3) — Reply nesting depth

Try the Styled preset on the homepage: open the live demo and use the preset switcher to select "Styled".

Open live demo

Back to docs