Hero Card

A simple Hero Card for your dashboard page

Install the component with CLI

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

npx polarisui-cli add herocard

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  Text,
6  InlineStack,
7  Button,
8  Thumbnail,
9} from "@shopify/polaris";
10
11export const HeroCard = () => {
12  return (
13    <Layout.Section>
14      <Card padding="800">
15        <BlockStack gap="300" align="center">
16          <InlineStack align="center">
17            <Thumbnail source="/favicon.ico" alt="logo" size="small" />
18          </InlineStack>
19          <Text as="h2" variant="headingMd" alignment="center">
20            Welcome back 👋 Keep your shelves stocked and your sales flowing

Usage

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

1import { HeroCard } from "../components/herocard";

1<HeroCard />

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

Place your logo into the public folder. Either name it 'favicon.ico' or rename the filename in the component to your logo filename.

Get Started

Components

Blocks

Hero Card

Built by:

Noahbuiltsapps

Last updated:

Sep 16, 2025