Feedback Card

Feedback Card to collect in app feedback from users

Install the component with CLI

Run this command in your terminal and the component will be created automatically:

npx polarisui-cli add feedbackcard

Install the component manually

Create a new folder in /app/ called components/. There create a new file and copy the code below into the component.

1import {
2  Card,
3  BlockStack,
4  Text,
5  Button,
6  ButtonGroup,
7  InlineStack,
8  Layout,
9} from "@shopify/polaris";
10import { XIcon, ThumbsDownIcon, ThumbsUpIcon } from "@shopify/polaris-icons";
11import { useState } from "react";
12
13export const FeedbackCard = () => {
14  const [isVisible, setIsVisible] = useState(true);
15  const [feedbackSubmitted, setFeedbackSubmitted] = useState(false);
16  return isVisible ? (
17    <Layout.Section>
18      <Card>
19        {!feedbackSubmitted ? (
20          <BlockStack gap="400" align="start">

Usage

To use this component in your app, simply import it and render it anywhere in your code:

1import { FeedbackCard } from "../components/feedbackcard";

1<FeedbackCard />

By default, all PolarisUI components are wrapped in a <Layout.Section>.
This means they render full width within the page layout, following Polaris defaults.

If you want the component to only take half width or be placed differently (eg. in a Indextable):

Remove the <Layout.Section> wrapper → the component will no longer span the entire width.
Wrap it in a Card (or any Polaris container) instead to control the sizing.

Customization

The Feedback Card ships without an API connection by default. You can extend it to save user responses to your preferred backend solution, such as a hosted database (e.g. Supabase, Neon), a Notion database, or any other data collection tool.

The default setup provides simple "Good" and "Bad" buttons, but you can easily customize the options. For example, you could replace the two buttons with a text field to collect open-ended written feedback, or swap the labels/icons for more specific rating categories.

Consider connecting the onClick handlers to an async function that sends the feedback payload to your chosen service. This way, the component becomes a powerful in-app feedback collector that helps you capture both quick ratings and more detailed responses.

Get Started

Components

Blocks

Feedback Card

Built by:

Noahbuiltsapps

Last updated:

Sep 18, 2025