Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Thread Templates Comments Block for Ark UI

A report form with Bug report, Feature request and Question templates, typed fields with required marks, a live Markdown preview and a thread the filled template posts into.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Get useful reports instead of one-line comments, with this template picker for React with Ark UI. A compact header names the form. In the frame a vertical Tabs list chooses a template; each has four typed fields with a required mark, a hint and a problem line that is always in its place, so errors never move the form. Under the fields a Collapsible shows the Markdown the comment will become, updated as you type. The one Shine Button, Post to thread, checks the required fields and adds a structured comment to the thread below, a held scroll region; Reset clears the open template. On a phone the tab list becomes a select above the form. It is built from Tabs, Collapsible, Field, Input, Textarea, Native Select, Badge and Guides. For issue intake, support portals and any team that wants the same details every time.

FAQ

How do I add or change a template?

Edit TEMPLATES and FIELDS. A field has an id that starts with its template, a label, whether it is a line or a box, required, a hint and a placeholder. Keep the same number of fields in each template so the form keeps one height. markdownOf turns the values into the comment.

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

Posting adds a row to a list in the page and the status line says nothing was sent. To make it real, post the Markdown from post to your API and add the row from its answer; validate the required fields on the server too.

How does validation work?

Post to thread checks every required field of the open template and shows a problem under each one that fails; the first failing field takes focus. A title shorter than eight characters says how many more it needs. A problem clears as soon as you type in that field.

Is it accessible?

The template list is a vertical tab list you move through with the arrow keys, every field has a label that includes "required", problems sit in the field's own error slot, the preview is a scrollable region, and one polite line reports each result. Ctrl or ⌘ + Enter posts from any field.

How does it look on a phone?

The tab list is replaced by a labelled select above the form, the fields use the full width, and the Post and Reset buttons share a row under the status line.