Support Card

Simple support card to get in app support from users

Install the component with CLI

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

npx polarisui-cli add supportcard

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  Layout,
4  Text,
5  BlockStack,
6  InlineStack,
7  TextField,
8  Button,
9  DropZone,
10  LegacyStack,
11  Thumbnail,
12} from "@shopify/polaris";
13import { NoteIcon, DeleteIcon } from "@shopify/polaris-icons";
14import { useCallback, useState } from "react";
15
16export const SupportCard = () => {
17  const [contactMessage, setContactMessage] = useState("");
18  const [contactSubject, setContactSubject] = useState("");
19  const [files, setFiles] = useState<File[]>([]);
20

Usage

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

1import { SupportCard } from "../components/supportcard";

1<SupportCard />

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 Support Card is designed to help users send you in-app support requests directly. It includes:

Subject field → for short issue descriptions
Message field → for detailed feedback or bug reports
File uploads → users can attach screenshots, images, or other files
Send button → ready to be connected with your backend

Connecting to a Backend / Database

Currently, the “Send Message” button does not store or send the data anywhere. You’ll need to connect it to your preferred backend. For example:

Supabase / Neon / PostgreSQL → save subject, message, and file references
Notion DB → log each support request as a new row
Email API (e.g., Resend, SendGrid, Postmark) → send requests directly to your support inbox
Custom REST / GraphQL API → connect to your own server or SaaS tools

Customization Options

Replace the file uploader with a drag-and-drop image-only uploader if you only want screenshots.
Extend the TextField into a rich text editor (e.g., for better bug report formatting).
Add a priority dropdown (Low, Medium, High) or category selector (Bug, Question, Feature Request).
Instead of saving messages to a database, you could push them into:
- Slack (via webhook)
- Linear / Jira for ticket creation
- Notion Kanban Board for issue tracking

Get Started

Components

Blocks

Support Card

Built by:

Noahbuiltsapps

Last updated:

Sep 18, 2025