DOCSEARCHbyAlgolia
Submit Docs

Polaris React

repository·main·Indexed 27 days ago

https://github.com/shopify/polaris-react

A deprecated library of UI components for Shopify. This repository includes the @shopify/polaris React package, @shopify/polaris-icons, @shopify/polaris-tokens for design atoms, and the Polaris Migrator for codebase upgrades. Shopify now recommends using Polaris Web Components for a framework-agnostic approach to building apps.

Tokens
166.7K
Snippets
250
Records
1.2K
Agent score
86%

What's inside Polaris React

  1. Introduction to the Polaris design system

    main

    Polaris is the design system for the Shopify admin. It provides a shared language for designers and developers to build high-quality merchant experiences. The system consists of:

    • Design guidance: Principles for creating merchant-facing interfaces.
    • Code libraries: Reusable components and patterns.
    • Development opinions: Best practices for implementation.
    • API documentation: Technical specifications for building merchant experiences.

  3. Use the Page component to build page layouts

    main

    The Page component is used to build the outer wrapper of a page in the Shopify admin. It provides a consistent container for composing pages, including the page title, app icon, breadcrumbs, and associated page-level actions.

    Common use cases include:

    • Detail pages: Use with pagination and breadcrumbs.
    • Full-width layouts: For wide tables or lists.
    • Narrow-width layouts: For single unified tasks to help focus attention.
    • Action-heavy pages: Use action groups when there are too many secondary actions to display individually.

  5. Understand the Polaris typescales

    main

    Polaris provides two distinct typescales to create visual hierarchy in the UI:

    1. Heading typescale: Used for headings and structural hierarchy.
    2. Body typescale: Used for general UI text and content.

    Key characteristics:

    • Grid Alignment: All line heights are aligned with the 4px grid.
    • UI Optimization: The scales are optimized for high-density layouts, software interfaces, and complex features rather than long-form reading.

  11. Use primitive font scales and semantic tokens

    main

    Polaris typography is built on two layers of tokens:

    1. Primitive font scales: These are the base building blocks consisting of:

      • Font Family
      • Font Weight
      • Letter Spacing
      • Font Size (translates to pixel values)
      • Line Height (translates to pixel values)

    2. Semantic text tokens: A layer of composite tokens that reference the primitive scales. These are designed to map directly to the variants available in the Text component and provide a streamlined approach to UI hierarchy.

  12. Understand the Polaris Global Color Palette

    main
    The Polaris color palette consists of 12 colors, each with 16 shades. The palette is built using HSLuv Lightness values to ensure perceptual uniformity. This means that color transformations (like lightening or darkening) are visually consistent across different hues. For example, Red 12 and Blue 12 will have identical contrast ratios when paired with the same background color, making it easier to substitute hues while maintaining accessibility.