Feedback Blocks

Ways to ask people what they think: a mood-and-note card and an inline thumbs vote.

Feedback Card

A three-step card. Pick a face from five moods, then choose a topic on a sliding switch and add an optional note, then confirm. Moods lift and press on hover and tap, steps crossfade, Send spins before it flips to a green check with a spring pop, and Send another starts over.

pnpm dlx shadcn@latest add @ditherui/feedback-card

How is it going?

Pick the face that fits. It takes ten seconds.

Install

$ pnpm dlx shadcn@latest add @ditherui/feedback-card

Props

PropTypeDefault

titlestring"How is it going?"

onSubmit(value: { rating: number; topic: string; message: string }) => void— (rating is 1–5)

classNamestring—

Helpful Vote

Open page

An inline Was this page helpful? strip for the end of an article. Thumbs up thanks you straight away. Thumbs down opens a row of reason chips that you can toggle, plus Send. The strip grows and shrinks with a spring, the active thumb uses a sliding highlight, and Undo brings the question back.

pnpm dlx shadcn@latest add @ditherui/helpful-vote