shadcn.io is not affiliated with official shadcn/ui
Response Templates Reviews Block for Radix UI
Reply templates for a bike-repair shop: vertical Tabs for four categories with counts, the templates in each, a Select for the review being answered, an editable Textarea, a preview with marked variables and a Copy button.
Installation
Overview
A reply template library for React with Radix UI, for Eavesmill, a fictional bike-repair shop. Under a compact header, a band with a divider splits the section. At the start, vertical Tabs list four categories with their counts (Thanks 3, Apology 2, Parts delay 2, Refunds 2; chips in a row on a phone), and the open category lists its templates as pressable rows with a two-line excerpt. At the end, the working side: a Select to choose which review is being answered (four sample reviews with their stars and service), the review's words, a Textarea holding the chosen template with its {{first_name}} and {{product}} variables, a preview of the reply with those variables filled in from the review and marked with mark, and a Copy button that puts the filled-in text on the clipboard. Edits are kept per template, a variable that isn't recognised stays as typed and is counted, and nothing is sent. Every count comes from the typed templates. It's built from Tabs, Select, Textarea, Field, Badge, Copy Button and Guides.
FAQ
How do I add templates, categories and variables?
Add a category to CATEGORIES and templates to TEMPLATES (each with a category, a title and a body), and the tab counts follow. Variables are names in double braces: to add one, give fillOf the name and the value it stands for, and list the name in KNOWN so a typo is told apart from a real variable. The library here is typed example text for a fictional shop.
How are the variables filled in?
The Select picks one of the typed reviews, and the preview cuts the template into plain runs and variables: each known variable is replaced by that review's first name or service and wrapped in mark, and an unknown one such as a misspelt name stays as typed, still marked, with a line under the preview saying how many aren't recognised. Copy puts the filled-in text, not the template, on the clipboard.
What happens to my edits?
They stay with the template you edited, so switching to another and back keeps them; a reload starts afresh. Choosing a different review changes only the preview, never the Textarea. Nothing is saved or sent anywhere, and the page says so beside the Copy button.
How do the category Tabs and the template rows work?
Choosing a category opens its first template; pressing a row selects that template and marks it as pressed. An unseen copy of every category's list holds the height, so switching category never moves the page.
The Tabs are vertical and controlled through value and onValueChange; the selected tab is marked data-active.