Feedback Card

How was your experience?

Your feedback helps us improve

"use client";

import { FeedbackCard } from "@/components/matos-ui/feedback-card";

export function FeedbackCardDemo() {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <FeedbackCard />
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/feedback-card.json

Usage

import { FeedbackCard } from '@/components/matos-ui/feedback-card'

<FeedbackCard
  onSubmit={data => {
    console.log('Selected rating:', data.rating)
    console.log('Optional message:', data.message)
  }}
/>

Props

Prop	Type	Default	Description
`title`	`string`	`"How was your experience?"`	Title in the initial state.
`subtitle`	`string`	`"Your feedback helps us improve"`	Subtitle in the initial state.
`options`	`FeedbackOption[]`	Internal default	Options with emoji faces, labels and values.
`onSubmit`	`(data) => void`	—	Called when the user clicks "Submit feedback".
`successTitle`	`string`	`"Thanks for your feedback!"`	Title of the success panel.
`successDescription`	`string`	`"Your rating was sent successfully."`	Description of the final panel.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Sets the maximum width of the component.

Fluid Transitions (Morphing)

This component uses Framer Motion's layout prop to achieve seamless transitions between each step. No DOM mounting happens abruptly — everything is driven by a spring animation.

The selected emoji naturally migrates to the top of the card (layoutId) via a subtle shared element transition.
The final SVG checkmark draws itself using the pathLength animation from the Framer Motion engine.