# CommentItem

> One comment: who wrote it, what they said, and the reactions to it.

- **Level**: molecule · **Status**: experimental (R15: may change or be removed; J-11) · **Role**: content
- **Import**: `import { CommentItem } from "@rrios-forge/ui/molecules/comment-item";`
- **Source**: `packages/ui/src/molecules/comment-item`

Compact comment / message row. Reading order: avatar / author + timestamp → body → actions. Actions sit below the body so they never dominate the content. Patterns consulted: Patterns/Information Architecture · MetadataAndActions.

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `density` | — | `compact` `comfortable` | — | — |

## Stories

- [Playground](/?path=/story/components-molecules-commentitem--playground) · frame: `/iframe.html?id=components-molecules-commentitem--playground&viewMode=story`
- [Compact](/?path=/story/components-molecules-commentitem--compact) · frame: `/iframe.html?id=components-molecules-commentitem--compact&viewMode=story`
- [With actions](/?path=/story/components-molecules-commentitem--with-actions) · frame: `/iframe.html?id=components-molecules-commentitem--with-actions&viewMode=story`
- [With badge](/?path=/story/components-molecules-commentitem--with-badge) · frame: `/iframe.html?id=components-molecules-commentitem--with-badge&viewMode=story`
- [Comment list](/?path=/story/components-molecules-commentitem--comment-list) · frame: `/iframe.html?id=components-molecules-commentitem--comment-list&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).