Feedback

Renders interactive feedback buttons with animated icons and transitions. It shows a card when a button is clicked, with a feedback form. Use it when collecting user feedback in a dynamic way.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/feedback

npx layro-cli add @watermeloncorp/feedback

npx layro-cli add @watermeloncorp/feedback

bunx layro-cli add @watermeloncorp/feedback

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import React, { useState } from 'react';
import { motion, AnimatePresence, LayoutGroup } from 'motion/react';
import { X, Sparkle } from 'lucide-react';
import { Navigation03Icon } from '@hugeicons/core-free-icons';
import { HugeiconsIcon } from '@hugeicons/react';
import {
  FaRegThumbsUp,
  FaThumbsUp,
  FaRegThumbsDown,
  FaThumbsDown,
} from 'react-icons/fa6';

interface FeedbackComponentProps {
  onSubmit?: (data: { rating: 'up' | 'down'; feedback: string }) => void;