Example code or design with Polaris Web component

Polaris
1

Hi,
I’m finding it very difficult to create a good UI using Polaris Web Components. The documentation doesn’t provide enough guidance or real-world examples to help with designing a polished interface.

Does anyone know of any working example apps, or any well designed app on the App Store, that use Polaris Web Components? I’m looking for inspiration and to better understand what kind of designs and experiences are achievable with Polaris Web Components.

2

Hi @mukesh, check out the patterns section of our Polaris documentation:
https://shopify.dev/docs/api/app-home/patterns
The templates there should be particularly useful.

You can also look at apps using Polaris React for inspiration, the UI patterns translate directly to Polaris web components since most React components have a web component equivalent (e.g., Page → s-page, Button → s-button, IndexTable → s-table).

3

Thanks for the link. I’ve reviewed it, but many elements seem to be missing in the Web Component implementation. For example, in the React component version we have both a title and a subtitle. In the new Polaris Web Component, I’m not sure how to achieve a similar design.
There few more like Tabs, not sure how to arrange them in beautiful way hence I was asking for some demo. Along with these data table for react component is more superior compare to Web component.

image
image1798×834 32.6 KB

4

Not everything is available yet, it’ll all most likely be gradually rolled out.

5

Yeah, we’ll slowly roll out more components.

Regarding the tabs in that screenshot, you can use the button component:

export default function DisplayPage() {
  return (
    <s-page heading="3/4 inch Leather pet collar">

      {/* Primary action - Save button */}
      <s-button slot="primary-action" disabled>
        Save
      </s-button>

      {/* Secondary actions */}
      <s-button slot="secondary-actions">Duplicate</s-button>

      {/* Promote dropdown */}
      <s-button slot="secondary-actions" commandFor="promote-menu">
        Promote
      </s-button>
      <s-menu id="promote-menu">
        <s-button>Create ad campaign</s-button>
        <s-button>Share on social media</s-button>
        <s-button>Send email blast</s-button>
      </s-menu>

      {/* More actions dropdown */}
      <s-button slot="secondary-actions" commandFor="more-actions-menu">
        More actions
      </s-button>
      <s-menu id="more-actions-menu">
        <s-button>Archive</s-button>
        <s-button>View on storefront</s-button>
        <s-button tone="critical">Delete</s-button>
      </s-menu>

      {/* Navigation arrows */}
      <s-button
        slot="secondary-actions"
        icon="chevron-left"
        accessibilityLabel="Previous product"
      />
      <s-button
        slot="secondary-actions"
        icon="chevron-right"
        accessibilityLabel="Next product"
      />


      {/* Credit card information card */}
      <s-section heading="Credit card">
        <s-paragraph>Credit card information</s-paragraph>
      </s-section>
    </s-page>
  );
}
1 Like