Product Feedback Portal app

A shared folder with AI prompts and code snippets

From workspace: HeroUI Chat

Team: Main

Total snippets: 7

HeroUI Chat

Product Feedback Portal app

7 snippets

Feedback Tagging System

Add tagging support to feedback submissions with Tailwind styled badges using HeroUI.

Use HeroUI badge and multi-select input to build a tagging system. - Tags: "Urgent", "Mobile", "UI", "Bug", etc. - Allow up to 5 tags per feedback - Display tags as rounded Tailwind badge components - Support keyboard selection and clearing

Starter Feedback Portal Layout

Initialize the layout for the feedback portal using HeroUI with a public board, sidebar, and header.

Design a full-page layout using HeroUI components for a Product Feedback Portal. - Sidebar: categories (All, Planned, In Progress, Completed) - Header: site logo, search bar, user profile - Main: feedback list or placeholder if none Use Tailwind...

Filter by Feedback Category

Add a filter bar to sort feedback by category using HeroUI's button group or tab system.

Create a filter bar using HeroUI’s tab or segmented control components. - Categories: All, Bug, Feature, UI/UX, Other - Highlight active tab - On click, update feedback list Ensure keyboard support and visual clarity using Tailwind spacing and...

Admin Response Panel

Enable admins to reply to feedback directly using HeroUI panel and modal elements.

Create an `AdminResponsePanel` using HeroUI. - Displays selected feedback - Includes textarea for reply, submit button - Replies display below with admin label - Accessible modal for writing response and status update

Submit Feedback Modal

Create a modal for submitting new feedback with title, description, and category fields.

Use HeroUI modal components to build a `SubmitFeedbackModal`. - Inputs: title (text), description (textarea), category (dropdown) - Buttons: Submit, Cancel - Focus trap, keyboard navigation, and screen reader labels must be included Follow HeroUI...

Public Feedback Board

Display all submitted feedback using HeroUI cards with filters, tags, and short previews.

Build a `FeedbackBoard` using HeroUI card components. - Each card shows title, short description, category tag, upvote count - Optional: comment count, status (e.g., planned) - Responsive grid layout using Tailwind and slots for extensions

Feedback Upvote Button

Build an upvote system using HeroUI buttons with state feedback and accessibility.

Design an `UpvoteButton` component using HeroUI. - Display current upvote count - Change style on click (active state) - Add aria-pressed for screen readers - Use Tailwind for styling and HeroUI's button pattern with slot injection for count/icon