Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Comments blocks

Pro

Screen Recording Comments Block for React

A bug thread whose Record screen dialog picks Entire screen, Window or Tab, runs a simulated recording clock, previews the take and attaches it to your comment.

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

Let people show a bug instead of describing it, with this recording dialog for React with Base UI. A compact header names the report and holds the one trigger, Record screen. The dialog is shown open in place over a drawn bug thread, so the page is not trapped or focused; pressing the trigger opens the real Dialog with the same content and the same state, a focus trap, Escape and focus back to the button. In it you choose what to share (three drawn cards that are native radios), press the Shine Button, which reads Start recording, then Stop recording, then Attach to comment, watch the catalog Timer count up to 0:30 beside a drawn frame, and review the take. Attaching adds your comment to the thread with a recording card whose Play says "No video in this demo". It is built from Dialog, Timer, Shine Button, Button, Avatar and Guides. For bug trackers, support tools and review threads.

FAQ

Which part is the preview's?

The in-place dialog, its scrim and the Escape handler on the stage exist only so the page shows the dialog open without trapping focus. In your app keep the Dialog and drop the "in-place" state, the scrim and the drawn dialog. Both wrappers share RecorderFields and the block's state.

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

Everything. getDisplayMedia is never called, nothing is captured and nothing is uploaded: the frame is a drawing, the clock is a Timer and Attach adds a card to a list. To make it real, call navigator.mediaDevices.getDisplayMedia from Start recording, record the stream with MediaRecorder, upload the file in the Attach handler and show a video element in the card.

How do the steps work?

One primary changes with the step so there is never a second Shine Button. A recording under a second is refused; at 0:30 it stops by itself. In review, Record again returns to the choice of what to share. Cancel, the close button and Escape discard the take and stop the clock.

Is it accessible?

The three sources are a group of native radios you move through with the arrow keys, the dialog has a title and a description, the clock is plain text next to a sentence for screen readers, and one polite line reads each step.

How does it look on a phone?

The in-place dialog docks to the foot of the stage as a sheet, its source cards stack as rows with the drawing at the start, and the footer buttons stack with the primary on top.

All 100 comments blocks