Shopify Polaris ist das Design-System des Shopify-Admins und der Apps, die darin laufen, 2017 veröffentlicht mit Styleguide, Content-Richtlinien, Design Tokens und einer React-Komponentenbibliothek. Seit 2025 erscheint es als framework-unabhängige Web Components mit dem Präfix s-, und die React-Bibliothek ist abgekündigt.
Shopify Polaris
Details
- Vollständiger Name
-
Shopify Polaris — „Shopify’s unified UI framework built on web components“ (shopify.dev)
- Auch bekannt als
-
Polaris, Polaris Web Components, Polaris React (die abgekündigte Bibliothek)
Kernkonzepte:
-
Seiten für Händler. Eine Seite hat einen Titel, eine primäre und sekundäre Aktionen; Inhalte stehen in Karten und Abschnitten; Ressourcenlisten und Index-Tabellen zeigen Bestellungen, Produkte und Kunden.
-
Web Components mit dem Präfix
s-.<s-page>,<s-section>,<s-stack>und<s-button tone="critical" variant="primary">, geladen von Shopifys CDN und mit jedem Framework nutzbar (Using Polaris components). -
Die React-Bibliothek.
@shopify/polarismitPage,Layout,Card,IndexTable,BlockStack,InlineStackundBadge— das nutzt der meiste Code von vor 2025. -
Design Tokens. CSS Custom Properties mit dem Präfix
--pwie--p-color-bg-surface, aus@shopify/polaris-tokens. -
Content-Richtlinien. Polaris enthielt immer Regeln für Stimme, Ton und Formulierungen in Oberflächen für Händler, nicht nur Komponenten.
- Wichtige Vertreter
-
Shopify. Polaris stand Partnern ab Shopify Unite 2017 zur Verfügung, mit Styleguide, Content-Richtlinien, CSS, einer React-Komponentenbibliothek und einem Sketch-Kit (Liz Couto, Shopify-Partners-Blog, 2017); die Polaris Web Components wurden am 1. Oktober 2025 stabil (Shopify-Changelog)
Wann verwenden:
-
Shopify-Apps, Admin-Erweiterungen oder Backoffices für Händler bauen. In unserem Prior-Test baute jeder Lauf mit Anker für eine Team-Einstellungsseite eine Polaris-
Pagemit primärer Aktion, eineIndexTableundBadge-Töne. -
Dichte, aufgabenorientierte Admin-Masken mit klaren primären Aktionen gestalten
-
Oberflächentexte für Händler nach Polaris' Content-Regeln schreiben
Häufige Missverständnisse:
-
Nur „Polaris“ sagen. Das bloße Wort führte auf allen getesteten Stufen zum Polarstern; „Shopify Polaris“ legt es fest.
-
Web Components vom Modell erwarten. Jeder Lauf mit Anker schrieb in unserem Test Polaris React, keiner
s--Komponenten. Die React-Bibliothek ist abgekündigt, und mit React gerenderte Teile „won’t follow the updated Shopify admin“ (Polaris 2). Für neue Apps verlange Polaris Web Components und gib den Link zu shopify.dev mit.
Kritik:
-
Eine erzwungene Migration. Daniel Curtis berichtet in „Shopify Upgrades Checkout Blocks to Polaris Web Components“ (InfoQ, 2026) für Checkout-UI-Erweiterungen, dass nach einem Jahr, mit der Pflichtversion 2026-01, „sentiment has been more mixed“: Entwickler nannten das unversionierte CDN-Skript ein Stabilitätsrisiko und die Komponenten unvollständig, während die Bundles um 40 bis 85 Prozent schrumpften.
Aktueller Stand:
-
Web Components und Polaris 2. Das Repository von Polaris React ist archiviert und „will not receive updates or maintenance“; die alten Dokumentationsseiten leiten auf shopify.dev um. Der neu gestaltete Admin wird seit dem 15. September 2026 ausgerollt, und der Release Candidate von Polaris 2.0 vom 24. September 2026 verlangt von Apps den Wechsel zu Web Components; Built-for-Shopify-Apps haben bis zum 1. Mai 2027 Zeit (Changelog). Der Prior aus den Trainingsdaten ist die React-Zeit.
