Highlight Card

Simple card to highlight numbers like orders, returns, stock and more

Install the component with CLI

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

npx polarisui-cli add highlightcard

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  Layout,
3  BlockStack,
4  Card,
5  InlineGrid,
6  Icon,
7  Text,
8} from "@shopify/polaris";
9import {
10  AlertTriangleIcon,
11  ChartLineIcon,
12  MoneyIcon,
13  ProductIcon,
14} from "@shopify/polaris-icons";
15
16const highlights = [
17  {
18    icon: ChartLineIcon,
19    label: "Scanned products:",
20    value: "732",

Usage

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

1import { HighlightCard } from "../components/highlightcard";

1<HighlightCard />

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.

Get Started

Components

Blocks

Highlight Card

Built by:

Noahbuiltsapps

Last updated:

Sep 18, 2025