Settings Blobs

Simple Settings Blobs to organize your settings subpages

Install the component with CLI

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

npx polarisui-cli add settingsblobs

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  Icon,
7  Layout,
8} from "@shopify/polaris";
9import { Link as RemixLink } from "@remix-run/react";
10import { SettingsIcon, EmailIcon } from "@shopify/polaris-icons";
11
12export const SettingsBlobs = () => {
13  const settingsCards = [
14    {
15      icon: SettingsIcon,
16      title: "General",
17      description: "Manage your general settings.",
18      url: "/app/settings-general",
19      disabled: false,
20      hideicon: false,

Usage

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

1import { SettingsBlobs } from "../components/settingsblobs";

1<SettingsBlobs />

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

To add new settings blobs, just extend the settingsCards array with another object. Each blob is basically config-driven:

icon: pass in any Polaris icon
title: the label shown in the card
description: the small text under the title
url: the route the card links to
disabled: true → renders as inactive (shows (soon), muted styles and link is inactive)
hideicon: true → card renders without the icon

Get Started

Components

Blocks

Settings Blobs

Built by:

Noahbuiltsapps

Last updated:

Sep 18, 2025