Measured entry
ruixen-comment-thread
A client-side React composition for nested, collapsible comment replies. It ships as copied shadcn registry source, wraps the shadcn Accordion primitives, and uses Tailwind utility classes plus a cn helper backed by clsx and tailwind-merge. Avatars accept an image or derive initials from a name.
Measured
Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.
| Build | OK |
|---|---|
| Mount | OK |
| Console errors | 4 |
| Uncaught page errors | 0 |
| Horizontal overflow | clean at 375, 768, 1440 |
| Axe critical | 0 |
| Axe serious | 0 |
| Axe moderate | 0 |
| Axe minor | 0 |
| Gzip marginal | 40.2 KB (105.7 KB build, 65.5 KB baseline) |
| Bare mode | FAIL |
| Provider required | NO |
| Demo used | written from the component source API |
What the harness recorded
CONSOLE
Failed to load resource: the server responded with a status of 404 (Not Found)
CONSOLE
Failed to load resource: the server responded with a status of 404 (Not Found)
CONSOLE
Failed to load resource: the server responded with a status of 404 (Not Found)
Verdict
A focused display primitive with sensible composition and clean nested behavior. It needs a shadcn-style setup, and the supplied demo's avatar paths should be replaced to avoid failed asset requests. Choose it when you want the thread shell, not a full comment system.
Use it if
- You need a read-only threaded discussion view with independently collapsible reply branches.
- Your app already uses shadcn Accordion primitives, Tailwind theme tokens, and the usual cn utility.
- You want small composable pieces so comment metadata and body content can be supplied by your own data layer.
Skip it if
- You need a complete commenting feature with posting, editing, reactions, moderation, or persistence.
- Your design system does not use Tailwind or shadcn primitives and you do not want to translate its utility classes and imports.
- You need built-in handling for very deep or very large threads, such as pagination, virtualization, or depth limits.
Install
| Declared dependencies | radix-ui, clsx, tailwind-merge |
|---|---|
| Missing on install | none |
| Bare install | fails once the shadcn-style helpers are removed, so it needs that setup |
| Provider | no provider required in the harness |
In a non-shadcn project, add React client-component support, Tailwind with the referenced theme tokens, an Accordion implementation compatible with the imported API, a cn helper using clsx and tailwind-merge, and either configure the at-sign path alias or replace those imports with local paths. Supply valid avatar assets or rely on the initials fallback.
Source and credit
This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.
Author repository
github.com/ruixenui/ruixen.comAlternatives
Other published entries for the chat pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.
- hextaui-alertminimal-flat
- Renders
- YES
- A11y
- 0
- Gzip
- 26.8KB
- Bare
- fail
- Prov
- NO
- kibo-bannerminimal-flat
- Renders
- YES
- A11y
- 0
- Gzip
- 33.0KB
- Bare
- fail
- Prov
- NO
- ruixen-smart-paste-inputunclassified
- Renders
- YES
- A11y
- 0
- Gzip
- 44.4KB
- Bare
- fail
- Prov
- NO
- ruixen-faq-chat-accordionunclassified
- Renders
- YES
- A11y
- 0
- Gzip
- 67.7KB
- Bare
- fail
- Prov
- NO
- ruixen-gradient-chat-inputgradient-glow
- Renders
- YES
- A11y
- 0
- Gzip
- 72.6KB
- Bare
- fail
- Prov
- NO
- tripled-ai-chat-interface-shadcnuiminimal-flat
- Renders
- YES
- A11y
- 0
- Gzip
- 74.3KB
- Bare
- fail
- Prov
- NO