CINXE.COM
Shopify Polaris
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="initial-scale=1, width=device-width"/><link rel="shortcut icon" href="/images/favicon.png"/><meta property="og:image" content="/og-images/home.png"/><title>Shopify Polaris</title><meta name="description" content="A starter kit for reimagining commerce."/><meta name="next-head-count" content="6"/><link rel="preconnect" href="https://cdn.shopify.com/"/><link href="https://cdn.shopify.com/static/fonts/inter/v4/styles.css" rel="stylesheet"/><link rel="preload" href="/_next/static/css/74f24fb0d64683c7.css" as="style"/><link rel="stylesheet" href="/_next/static/css/74f24fb0d64683c7.css" data-n-g=""/><link rel="preload" href="/_next/static/css/c268b28a4e313a5f.css" as="style"/><link rel="stylesheet" href="/_next/static/css/c268b28a4e313a5f.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script><script src="/_next/static/chunks/webpack-a95c8883bf7daf7a.js" defer=""></script><script src="/_next/static/chunks/framework-2a10f1ded7f8a848.js" defer=""></script><script src="/_next/static/chunks/main-5a109b0975948a9e.js" defer=""></script><script src="/_next/static/chunks/pages/_app-a4c00ccc0aeb632f.js" defer=""></script><script src="/_next/static/chunks/44619-470216c97fe0eb21.js" defer=""></script><script src="/_next/static/chunks/pages/index-4e80cdb22822f6a4.js" defer=""></script><script src="/_next/static/_ScgE-ScvefHcIHoEmQ8h/_buildManifest.js" defer=""></script><script src="/_next/static/_ScgE-ScvefHcIHoEmQ8h/_ssgManifest.js" defer=""></script></head><body><div id="__next"><script>!function(){var b="darkMode",g="dark-mode",j="light-mode";function d(a){document.body.classList.add(a?g:j),document.body.classList.remove(a?j:g)}var e="(prefers-color-scheme: dark)",c=window.matchMedia(e),h=c.media===e,a=null;try{a=localStorage.getItem(b)}catch(k){}var f=null!==a;if(f&&(a=JSON.parse(a)),f)d(a);else if(h)d(c.matches),localStorage.setItem(b,c.matches);else{var i=document.body.classList.contains(g);localStorage.setItem(b,JSON.stringify(i))}}()</script><div style="background:unset;--polaris-shopify-com-version:1.1.2" class="styles-for-site-but-not-polaris-examples"><div class="Frame_Header__ZUd0n"><a class="Frame_SkipToContentLink__Uaa4W" href="#main">Skip to content</a><button id="menu-button" aria-label="Open menu" aria-controls="nav" aria-expanded="false" class="Frame_NavToggle__XxEwL"><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M19 11h-18a1 1 0 0 1 0-2h18a1 1 0 1 1 0 2zm0-7h-18a1 1 0 0 1 0-2h18a1 1 0 1 1 0 2zm0 14h-18a1 1 0 0 1 0-2h18a1 1 0 0 1 0 2z"></path></svg></button><a class="Frame_Logo__yqPG6" href="/"><img alt="Shopify logo" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" style="color:transparent" src="/images/shopify-logo.svg"/>Polaris</a><button class="GlobalSearch_ToggleButton__vsZU_" aria-label="Search"><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 8c0-3.309 2.691-6 6-6s6 2.691 6 6-2.691 6-6 6-6-2.691-6-6zm17.707 10.293l-5.395-5.396A7.946 7.946 0 0016 8c0-4.411-3.589-8-8-8S0 3.589 0 8s3.589 8 8 8a7.954 7.954 0 004.897-1.688l5.396 5.395A.998.998 0 0020 19a1 1 0 00-.293-.707z" fill="currentColor"></path></svg>Search <span class="GlobalSearch_KeyboardShortcutHint__byDDa">/</span></button><div style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></div></div><div class="Frame_NavAndContent__kJosr"><nav class="Frame_Nav__07Paf" id="nav"><ul><li class=""><span class="Frame_NavItem__FmKTU"><a aria-current="false" href="/whats-new">What鈥檚 new</a></span></li><li class=""><span class="Frame_NavItem__FmKTU"><a aria-current="false" href="/getting-started">Getting started</a><button class="Frame_Toggle__tuPbl" aria-label="Toggle section" aria-expanded="false"></button></span></li><li class="Frame_newSection__iNMX6"><span class="Frame_NavItem__FmKTU"><a aria-current="false" href="/foundations">Foundations</a><button class="Frame_Toggle__tuPbl" aria-label="Toggle section" aria-expanded="false"></button></span></li><li class=""><span class="Frame_NavItem__FmKTU"><a aria-current="false" href="/design">Design</a><button class="Frame_Toggle__tuPbl" aria-label="Toggle section" aria-expanded="false"></button></span></li><li class=""><span class="Frame_NavItem__FmKTU"><a aria-current="false" href="/content">Content</a><button class="Frame_Toggle__tuPbl" aria-label="Toggle section" aria-expanded="false"></button></span></li><li class="Frame_newSection__iNMX6"><span class="Frame_NavItem__FmKTU"><a aria-current="false" href="/patterns">Patterns</a><button class="Frame_Toggle__tuPbl" aria-label="Toggle section" aria-expanded="false"></button></span></li><li class=""><span class="Frame_NavItem__FmKTU"><a aria-current="false" href="/components">Components</a><button class="Frame_Toggle__tuPbl" aria-label="Toggle section" aria-expanded="false"></button></span></li><li class=""><span class="Frame_NavItem__FmKTU"><a aria-current="false" href="/tokens">Tokens</a><button class="Frame_Toggle__tuPbl" aria-label="Toggle section" aria-expanded="false"></button></span></li><li class=""><span class="Frame_NavItem__FmKTU"><a aria-current="false" href="/icons">Icons</a></span></li><li class="Frame_newSection__iNMX6"><span class="Frame_NavItem__FmKTU"><a aria-current="false" href="/contributing">Contributing</a><button class="Frame_Toggle__tuPbl" aria-label="Toggle section" aria-expanded="false"></button></span></li><li class=""><span class="Frame_NavItem__FmKTU"><a aria-current="false" href="/tools">Tools</a><button class="Frame_Toggle__tuPbl" aria-label="Toggle section" aria-expanded="false"></button></span></li><li class=""><span class="Frame_NavItem__FmKTU"><a aria-current="false" href="/version-guides">Version guides</a><button class="Frame_Toggle__tuPbl" aria-label="Toggle section" aria-expanded="false"></button></span></li><li class=""><span class="Frame_NavItem__FmKTU"><a aria-current="false" href="/coming-soon">Coming soon</a></span></li></ul><button aria-label="Close menu" class="Frame_CloseButton__3Ccxw"><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414l-6.293 6.293-6.293-6.293a1 1 0 0 0-1.414 1.414l6.293 6.293-6.293 6.293a1 1 0 1 0 1.414 1.414l6.293-6.293 6.293 6.293a.998.998 0 0 0 1.707-.707.999.999 0 0 0-.293-.707l-6.293-6.293z"></path></svg></button></nav><div class="Frame_PageContent__nJv_A"><div class="Container_Container__W5d2T Page_Page__ZKV6u"><article style="--pc-box-padding-block-start-xs:var(--p-space-0);--pc-box-padding-block-end-xs:var(--p-space-0);--pc-box-padding-inline-start-xs:var(--p-space-0);--pc-box-padding-inline-end-xs:var(--p-space-0)" class="Box_Box__TD0Ry Page_Post__7tq1a" id="main"><div class="HomePage_HomePage___rX2M"><div class="HomePage_Hero__KBRZm"><div class="HomePage_Text__1_pW_"><h1><span>Build.</span> <span>Contribute.</span> <span>Evolve.</span></h1><p>Shape the merchant experience for Shopify鈥檚 core product, the admin.</p></div></div><div class="HomePage_EntryPoints__pFF0h"><a class="HomePage_EntryPoint__q8CCb" href="/foundations"><h3>Foundations</h3><p>Fundamental design guidance for creating quality admin experiences</p></a><a class="HomePage_EntryPoint__q8CCb" href="/components"><h3>Components</h3><p>Reusable elements and styles, packaged through code, for building admin interfaces</p></a><a class="HomePage_EntryPoint__q8CCb" href="/tokens/color"><h3>Tokens</h3><p>Coded names that represent design decisions for color, spacing, typography, and more</p></a><a class="HomePage_EntryPoint__q8CCb" href="/icons"><h3>Icons</h3><p>Over 400 carefully designed icons focused on commerce and entrepreneurship</p></a></div><div class="HomePage_Promos__IUI5L"><div class="HomePage_Promo__F1XdO HomePage_News__toR63 dark-mode"><div class="HomePage_Text__1_pW_"><h3><span>New</span> Version 12</h3><p>Learn how to upgrade to Polaris' new design language.</p><a href="/whats-new/version-12">Read post</a></div><div class="HomePage_Image__q7ko_"><img alt="Polaris v12" loading="lazy" width="1600" height="800" decoding="async" data-nimg="1" class="Image_Image__mjI_a Image_fadeIn__NQj_F" style="color:transparent;width:100%;height:auto" srcSet="/_next/image?url=%2Fimages%2Fhome-v12.png&w=1920&q=75 1x, /_next/image?url=%2Fimages%2Fhome-v12.png&w=3840&q=75 2x" src="/_next/image?url=%2Fimages%2Fhome-v12.png&w=3840&q=75"/></div></div><div class="HomePage_Promo__F1XdO HomePage_PolarisForVSCode__M6wwK dark-mode"><div class="HomePage_Text__1_pW_"><h3>Polaris for VS Code</h3><p>Autocompletion for Polaris tokens, right inside your favorite code editor</p><a href="/tools/polaris-for-vscode">Install</a></div><div class="HomePage_Image__q7ko_"><div class="HomePage_Poster__4f8yk"><img alt="Screen shot of the Polaris VS Code extension actively autocompleting the value of a background CSS rule with the surface success design token." loading="lazy" width="2250" height="1440" decoding="async" data-nimg="1" class="Image_Image__mjI_a Image_fadeIn__NQj_F" style="color:transparent" srcSet="/_next/image?url=%2Fimages%2Fvscode.jpg&w=3840&q=75 1x" src="/_next/image?url=%2Fimages%2Fvscode.jpg&w=3840&q=75"/></div></div></div></div></div><footer class="Page_Footer__47Dcf"><p><a href="https://github.com/shopify/polaris/issues/new?title=%5Bpolaris.shopify.com%5D%20Feedback%20(on%20%2F)&amp;labels=polaris.shopify.com">Leave feedback</a></p></footer></article></div></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"_ScgE-ScvefHcIHoEmQ8h","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>