Best Alternatives of Polaris Deprecated Components for Shopify Remix App

Shopify Polaris is the design system for building Shopify admin interfaces. Change is inevitable and as Polaris evolves, some components are deprecated either due to new UX standards or continuing improvements in performance and API patterns. If you are building a Shopify Remix app and pairing deprecated Polaris components with unreleased Polaris components or closed code components, it is essential to replace them with modern and supported counterparts for performance, accessibility, and long-term maintenance.

In this blog post, we will learn the best alternatives to deprecated Polaris components that can be used for the Shopify Remix app.

Prerequisites: 

Before proceeding, you need to have proper knowledge of Shopify Polaris.

Alternatives to Polaris Deprecated Components for Shopify Remix App

Heading

Headings are used as the titles of each major section of a page in the interface.

That was previously mentioned like this:

<Heading>Online store dashboard</Heading>

But now, as it is deprecated, you can use this instead of heading:

<Text variant="headingMd" as="h2">Online store dashboard</Text>

LegacyCard

LegacyCard was used for containing the IndexTable and the DataTable.

Syntax of LegacyCard:

<LegacyCard title="Online store dashboard" sectioned> <p>View a summary of your online store’s performance.</p> </LegacyCard>

But now you can use Card instead of it. Here is the syntax of a card:

<Card title=’Title’></Card>

Navigation

Navigation was used to display the navigation menu in the left side panel of Shopify.

Here is the syntax of Navigation  : 

<Navigation location="/"> 
    <Navigation.Section items={[ { url: '#', label: 'Home', icon: HomeIcon, }, { url: '#', excludePaths: ['#'], label: 'Orders', icon: OrderIcon, badge: '15', }, { url: '#', excludePaths: ['#'], label: 'Products', icon: ProductIcon, }, ]} /> 
</Navigation>

But now you can use the App Bridge Navigation Menu API as an alternative to it.

Legacy stack

The legacy stack was used to lay out a horizontal row of components or to achieve no-fuss vertical centering.

Syntax of Legacy stack:

<LegacyStack>
    <LegacyStack.Item fill>
        <Text variant="headingMd" as="h2"> Order #1136 </Text
    </LegacyStack.Item>

    <LegacyStack.Item>
        <Badge>Paid</Badge>
    </LegacyStack.Item>

    <LegacyStack.Item>
        <Badge>Fulfilled</Badge>
    </LegacyStack.Item>
</LegacyStack>

As it is deprecated, you can now use the BlockStack component instead of it.

Conclusion:

In conclusion, there are many components that were deprecated by Shopify Polaris, but they have provided all alternatives so that developers can fluently make perfect designs for their Shopify apps.

For more details, you can also visit https://polaris.shopify.com/components/deprecated