Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Comments blocks

Pro

Cross Reference Comments Block for React

A thread whose composer reads #142-style numbers against an index of eight threads, flags unknown ones, and links posted references with a preview and a list of mentioned threads.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Connect discussions without leaving the box, with this linking composer for React with Base UI. A compact header names thread #160. The frame is a split: the thread and the composer first, a "Mentioned in this thread" list last. As you type, every number like #142 is read against a typed index of eight threads and shown under the Textarea with its title and state; a number that is not in the index is flagged ("No thread with this number") and stops the post with a sentence. Posted comments show each reference as a link that opens a Popover preview with the title, state, last activity and comment count. The side list is worked out from the comments and gains a row when you cite a new thread. It is built from Textarea, Popover, Badge, Field, Shine Button and Guides. For engineering wikis, trackers and any place threads refer to each other.

FAQ

How do I connect it to my threads?

Replace THREADS with your index (id, title, state, active and comments) or call your search from refsOf. References are found with one regular expression, REFERENCE; change it for another style such as PROJ-142.

What stays local, and how do I make it real?

Comments and links live in the page; nothing is sent. To make it real, save the comment from post, resolve the numbers on the server so a deleted thread cannot be linked, and store the link in both directions so the other thread can list "Mentioned in".

Why a popover and not a hover card?

A preview that opens on hover cannot be opened on a phone. The reference is a button: press or tap it, or use Enter, to open the preview, and Escape closes it.

Is it accessible?

Each reference button is named "Preview thread 142" with the title, the lines under the box are a list with a polite summary ("2 threads linked, 1 number not found"), and the problem under the box names the number that failed. Ctrl or ⌘ + Enter posts.

How does it look on a phone?

The linked-threads list moves under the composer and scrolls in its own region; the composer's primary takes a full-width row.

All 100 comments blocks