Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Copy Reply FAQ Block for Ark UI

A support playbook FAQ for a help desk: each situation opens on the team's advice and a reply to send, with its length in characters and a Copy reply button.

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

A reply-playbook FAQ for React with Ark UI. A start column holds the title, one sentence and a note on filling in the placeholders; beside it a framed list of six customer situations, each with a badge for its channel. A situation opens on the team's advice and the reply to send, in a box with its length in characters and a Copy reply button that puts the whole text on the clipboard. On a phone the note and the frame stack. It's built from Accordion, Copy Button, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For internal help centres, support handbooks and any FAQ whose answers are meant to be pasted somewhere else.

FAQ

What does Copy reply copy?

The reply exactly as the box shows it, line breaks included, with the placeholders still in it. The button swaps its copy icon for a check for three seconds and a polite status says "Copied" to screen readers. If the browser refuses clipboard access (a page that isn't served over HTTPS), the icon becomes a cross and the status says "Couldn't copy" instead.

Are the placeholders filled in?

No. A word in double braces, like {{first_name}}, is for the agent to replace before sending; the sentence under the title says so, and on a desktop a note in the start column explains it. Wire your own data in if you want them filled: the reply is a plain string in SITUATIONS.

Where does the character count come from?

It's the length of the reply string, computed from the same data the box prints, so it can't drift from the text. It counts the placeholders as written, since that's what's copied.

How do I change the situations?

Edit SITUATIONS at the top of the file: each entry is an id, the question (the situation), a note of advice, the reply and its channel, "Chat" or "Email". OPEN_QUESTION names the one that's open on load. One answer is open at a time.

How does it work with a keyboard and a screen reader?

Each situation is a button inside its own h3, and the open answer holds the advice, a labelled reply box and the Copy reply button, which is the only tab stop inside it. The reply's length is read as a number of characters. The Up and Down arrows also move between questions, and Home and End jump to the first and last.

Are the closed answers in the page's markup?

Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens. Search engines and server rendering see all of them, and closing an answer doesn't remove it.

How does it fit on a phone?

The note is left out (the sentence under the title says the same) and the framed list follows the header. A row's badge drops under the question, the reply box keeps its line breaks and wraps, and nothing scrolls sideways at 320 pixels.

All 100 faq blocks