Billing & Help Card

Card to display any kind of information like Billing, Plans, Help, Support and more

Install the component with CLI

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

npx polarisui-cli add billinghelpcard

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  Text,
4  BlockStack,
5  InlineStack,
6  Button,
7  Icon,
8  Divider,
9  Layout,
10} from "@shopify/polaris";
11import { EmailIcon, PriceListIcon } from "@shopify/polaris-icons";
12
13const billingItems = [
14  {
15    title: "Free Plan",
16    description: "$0.00 every 30 days. Upgrade to a paid plan with a free 7-day trial to unlock all features.",
17    icon: PriceListIcon,
18    buttonLabel: "Manage",
19    url: "/app/settings",
20  },

Usage

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

1import { BillingHelpCard } from "../components/billinghelpcard";

1<BillingHelpCard />

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 Billing & Help Card is a flexible component that you can use for any kind of quick-access links or information blocks inside your app.

Right now, it includes two example items:

Free Plan → placeholder for subscription or pricing info.
Support → quick link to your help or contact page.

Just extend the billingItems array with a new object in the same style as the current.

Replace title/description with your own product details.

Change the icons (any from @shopify/polaris-icons).
Point the button to a route, API, or external page.
Add or remove items freely, each entry in the array is rendered automatically.

Tip: This card is not limited to billing or help. You could also use it for:

Feature shortcuts (e.g., “Analytics”, “Reports”)
Account actions (e.g., “Change password”, “Invite team members”)
External resources (e.g., “Docs”, “Community Forum”)

Get Started

Components

Blocks

Billing & Help Card

Built by:

Noahbuiltsapps

Last updated:

Sep 18, 2025