# CommentsThread

> A discussion: comments, replies to them and a box to add yours.

- **Level**: organism · **Status**: experimental (R15: may change or be removed; J-11) · **Role**: content
- **Import**: `import { CommentsThread } from "@rrios-forge/ui/organisms/comments-thread";`
- **Source**: `packages/ui/src/organisms/comments-thread`

Threaded discussion with role=tree, aria-level per node and a depth-indexed indentation rail. Pure presentation: consumers own the comments tree and click handlers; the organism owns the a11y contract. Use mode=flat to suppress visual indentation while preserving semantic hierarchy.

## Use it for

- Threaded comments → `CommentsThread`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `mode` | — | `tree` `flat` | — | — |
| `density` | — | `comfortable` `compact` | — | — |
| `sort` | — | `recent` `top` `controversial` | — | — |

## Stories

- [Tree](/?path=/story/components-organisms-commentsthread--tree) · frame: `/iframe.html?id=components-organisms-commentsthread--tree&viewMode=story`
- [Flat](/?path=/story/components-organisms-commentsthread--flat) · frame: `/iframe.html?id=components-organisms-commentsthread--flat&viewMode=story`
- [Max depth (continue thread)](/?path=/story/components-organisms-commentsthread--max-depth) · frame: `/iframe.html?id=components-organisms-commentsthread--max-depth&viewMode=story`
- [Empty](/?path=/story/components-organisms-commentsthread--empty) · frame: `/iframe.html?id=components-organisms-commentsthread--empty&viewMode=story`
- [Compact](/?path=/story/components-organisms-commentsthread--compact) · frame: `/iframe.html?id=components-organisms-commentsthread--compact&viewMode=story`

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).