---
gid: c7a63b59-e17e-4dd3-ac03-f22d15c8691d
title: Polaris
description: Learn about Polaris, Shopify's next-gen ui toolkit.
template: landing_page
---

<HeroSection
  title="Polaris"
  lightImage="/assets/landing-pages/apps/polaris/polaris-hero.png"
  darkImage="/assets/landing-pages/apps/polaris/polaris-hero-dark.png"
>
Polaris is a single UI framework that makes it simple to integrate with all Shopify surfaces, including Shopify Admin, Checkout, and Customer accounts. Built on web platform standards and web components with consistent and familiar APIs and props, Polaris lets you write highly-performant, HTML-like code that works with any framework. Read more about the new unified Polaris experience on the [Shopify developer blog](https://www.shopify.com/partners/blog/polaris-unified-and-for-the-web).
<Notice label="Release candidate" type="beta" framed={true}>
  This is a release candidate of Polaris built with web components. If you're looking for the stable React implementation, please visit the <a href="https://polaris.shopify.com/">Polaris React documentation</a>.
</Notice>
</HeroSection>

<Section>
  <Grid columns={2}>
    <ImageCard
        variant="flat"
        imageLocation="top"
        title="App home"
        image="/assets/landing-pages/apps/polaris/polaris-embedded-apps.png"
        darkImage="/assets/landing-pages/apps/polaris/polaris-embedded-apps-dark.png"
        paragraph="body"
        href="/docs/api/app-home"
        hrefLabel="Get started"
        secondaryHref="/docs/api/app-home/polaris-web-components"
        secondaryHrefLabel="Polaris web components"
    >
        Build your app's primary user interface embedded in the Shopify Admin.
    </ImageCard>

    <ImageCard
        variant="flat"
        imageLocation="top"
        title="Admin UI extensions"
        image="/assets/landing-pages/apps/polaris/polaris-ui-extensions.png"
        darkImage="/assets/landing-pages/apps/polaris/polaris-ui-extensions-dark.png"
        paragraph="body"
        href="/docs/api/admin-extensions/2025-10-rc"
        hrefLabel="Get started"
        secondaryHref="/docs/api/admin-extensions/2025-10-rc/polaris-web-components"
        secondaryHrefLabel="Polaris web components"
    >
        Add custom actions and blocks from your app at contextually relevant spots throughout the Shopify Admin.
    </ImageCard>

    <ImageCard
        variant="flat"
        imageLocation="top"
        title="Checkout UI extensions"
        image="/assets/landing-pages/apps/polaris/polaris-checkout-ui.png"
        darkImage="/assets/landing-pages/apps/polaris/polaris-checkout-ui-dark.png"
        paragraph="body"
        href="/docs/api/checkout-ui-extensions/2025-10-rc"
        hrefLabel="Get started"
        secondaryHref="/docs/api/checkout-ui-extensions/2025-10-rc/components"
        secondaryHrefLabel="Polaris web components"
    >
        Build custom functionality that merchants can install at defined points in the checkout flow, including product information, shipping, payment, order summary, and Shop Pay.
    </ImageCard>

    <ImageCard
        variant="flat"
        imageLocation="top"
        title="Customer account UI extensions"
        image="/assets/landing-pages/apps/polaris/polaris-customer-accounts.png"
        darkImage="/assets/landing-pages/apps/polaris/polaris-customer-accounts-dark.png"
        paragraph="body"
        href="/docs/api/customer-account-ui-extensions/2025-10-rc"
        hrefLabel="Get started"
        secondaryHref="/docs/api/customer-account-ui-extensions/2025-10-rc/components"
        secondaryHrefLabel="Polaris web components"
    >
        Build custom functionality that merchants can install at defined points on the Order index, Order status, and Profile pages in customer accounts.
    </ImageCard>
  </Grid>
</Section>

<Section>
  <h2>Resources</h2>

  <Grid columns={3}>
    <IconCard
      title="Developer forums"
      variant="elevated"
      iconLocation="left"
      iconSize="large"
      image="/assets/icons/64/forums.png"
      darkImage="/assets/icons/64/forums-dark.png"
      href="https://community.shopify.dev/c/polaris/29"
      linkVariant="secondary"
      hrefLabel="Get started"
    >
        Connect with the Shopify community to ask questions and share your feedback.
    </IconCard>
    <IconCard
      title="Model Context Protocol (MCP)"
      variant="elevated"
      iconLocation="left"
      iconSize="large"
      image="/assets/icons/64/clicode.png"
      darkImage="/assets/icons/64/clicode-dark.png"
      href="/beta/next-gen-dev-platform/polaris/using-mcp"
      linkVariant="secondary"
      hrefLabel="Get started"
    >
      Get AI-powered assistance with Polaris components and patterns through MCP-enabled development environments.
    </IconCard>
  </Grid>
</Section>