Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Comments blocks

Pro

Emoji Only Comments Block for Vue

A standup pulse with six icon reactions as one choice, live counts that move by one when you change your answer, a ranked bar list and a Who chose list per reaction.

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

Ask for a feeling, not a paragraph, with this pulse check for Vue with Ark UI. A compact header names the standup. The frame opens with six cells on shared hairlines (Great, Good, Okay, Rough, Blocked and On fire), native radios drawn with an icon, a word and a count, so one answer each and the arrow keys move between them. Changing your answer moves one count down and another up. Under the cells a ranked list draws a bar for each reaction with its count and a whole-number share, shares that add to exactly 100, most chosen first. A last band lists who chose any one reaction, from a Native Select, as initials and names. There is no free text on purpose. It is built from native radios, Progress, Native Select, Avatar and Guides. For team check-ins, retros and any thread where the mood matters more than the words.

FAQ

How do I use my own reactions and people?

Edit MOODS (an id, a label and the voters who chose it before you) and PEOPLE, and add the icon to MoodIcon. Counts, shares and the order of the ranked list are worked out from the voters.

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

Your answer only changes numbers in the page. To make it real, store one answer per person and day, return the totals from the pick handler, and send the voters' names only to people allowed to see them.

Why do the percentages always add to 100?

Each share is rounded down and the leftover points go to the reactions with the biggest remainders. A plain rounding can total 99 or 101.

Is it accessible?

The cells are one group of native radios named by the question, each read with its count ("Rough, 2 chose it"), the bars are decorative because the counts are text, and a polite line says how your answer changed. The reaction is an icon and a word, never a colour.

How does it look on a phone?

The cells wrap to three across in two rows, each at least 44 pixels tall; the ranked list and the Who chose list keep the full width.

All 100 comments blocks