Components
Loading preview...
A responsive and theme-adaptive, Reddit-style nested comment system. It supports voting, replying, collapsing threads, and adding new comments, built with shadcn/ui components.
@vaib215
npx shadcn@latest add https://21st.dev/r/vaib215/reddit-nested-thread-replyimport { CommentThread, CommentType } from "@/components/ui/reddit-nested-thread-reply";
// Sample data for the discussion thread
const sampleComments: CommentType[] = [
{
id: 1,
author: "techguru42",
content: "This is a really interesting discussion about React components. I've been working with similar patterns and found that proper state management is crucial for nested structures like this.",
timestamp: "2h",
upvotes: 24,
downvotes: 2,
replies: [
{
id: 2,
author: "devninja",
content: "Absolutely agree! What state management solution do you recommend for deeply nested components?",
timestamp: "1h",
upvotes: 8,
downvotes: 0,
replies: [
{
id: 3,
author: "techguru42",
content: "I usually go with Zustand for simpler cases, but Redux Toolkit for more complex applications. The key is avoiding prop drilling.",
timestamp: "45m",
upvotes: 12,
downvotes: 1,
replies: []
}
]
},
{
id: 4,
author: "reactfan",
content: "Have you tried using React Context for this? I find it works well for theme management in nested components.",
timestamp: "30m",
upvotes: 5,
downvotes: 0,
replies: []
}
]
},
{
id: 5,
author: "designerdev",
content: "The UI looks great! Really clean design. How did you handle the responsive behavior on mobile?",
timestamp: "3h",
upvotes: 15,
downvotes: 0,
replies: []
}
];
// The demo component that renders the CommentThread
const CommentThreadDemo = () => {
return (
<div className="bg-background text-foreground w-full min-h-screen">
<div className="text-center space-y-2 pt-12 pb-6">
<h1 className="text-3xl font-bold">Discussion Thread</h1>
<p className="text-muted-foreground">
A Reddit-style nested comment system with voting and replies.
</p>
</div>
<CommentThread initialComments={sampleComments} />
</div>
);
};
export default CommentThreadDemo;