Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Reactions FAQ Block for Vue

A start-aligned FAQ for a design-feedback tool: six rows whose open answers end in four reaction chips, each a face or a heart with a word and a count, plus running totals.

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 reaction FAQ for Vue with Ark UI. A start-aligned header with a running total of reactions sits over six questions that run from rail to rail under a rule with + marks, and every row shows how many reactions it has. Each open answer ends in four chips (Clear, Love it, Cheers, Still thinking), each a small face or heart from lucide with a word and a count. Pressing a chip adds you to its count, pressing it again takes you out, and a pressed chip turns to the text colour on the page colour (never the primary). A polite line says what you reacted with, and nothing leaves the page. It's built from Accordion, Toggle, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For design tools, changelogs and docs where a quick reaction is easier than a form.

FAQ

How do I change the questions and the reactions?

Edit QUESTIONS at the top of the file: each entry is an id, the question, its answer and counts, how many people reacted before you, in the order of REACTIONS. REACTIONS holds each chip's lucide icon, id and word. OPEN_QUESTION names the row that's open on load. One answer is open at a time. Add multiple to the Accordion to let several stay open.

Why icons instead of emoji?

Emoji glyphs are drawn by the visitor's system in colour, which breaks the block's greyscale and looks different on every platform. A lucide face draws in the text colour, turns to the page colour when pressed and sits well in every theme, so each chip is an icon, a word and a count. The faces are lucide's own (a smile, a heart, a party popper and a neutral face for "Still thinking"); swap the icon of an entry in REACTIONS for any other lucide icon.

What happens when I press a chip?

You're added to that chip's count, and the row's total and the total in the header go up by one. Press it again and you're taken out. Several chips can be on at once, and a polite line lists them ("You reacted: Clear, Love it."). Your reactions live in the component's state, so a reload clears them; to store them, call your own endpoint from the toggle function.

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

Each question is a button inside its own h3 under the section's h2. The chips are toggle buttons in a group named after the question; each is read with its word and its count ("Love it 18") and says whether it's pressed. The counts sit in bdi, so a right-to-left layout keeps the digits in order. 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, and search engines and server rendering see all six.

How does it fit on a phone?

The header's total drops under the sentence, a row's total drops under its question, and the four chips wrap onto a second line when they don't fit. The rows run from rail to rail, and nothing scrolls sideways at 320 pixels.

All 100 faq blocks