Design6 min
Designing motion that feels inevitable
Springs, easing and the small details that make an interface feel alive instead of animated.
Sep 28Read
Search
Search components and blocks
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.
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—