Components

62 typed Vue wrappers, one per Polaris web component, grouped the way Shopify's own reference groups them.

Actions

• SButton<s-button>Triggers an action or navigates, with primary, secondary and tertiary variants, icons and a loading state.
• SButtonGroup<s-button-group>Lays out a set of related buttons together, such as a primary action and its secondary actions.
• SClickable<s-clickable>Makes any content clickable as a button or link, without imposing button styling.
• SClickableChip<s-clickable-chip>An interactive chip that can be clicked, followed as a link or removed — useful for filters and applied tags.
• SLink<s-link>A text link that navigates to another page or URL, or runs a command.
• SMenu<s-menu>A list of actions shown in an overlay, opened from a button.
• SPressButton<s-press-button>A toggle button that stays pressed or unpressed, for turning a mode or filter on and off.

Feedback and status

• SBadge<s-badge>A small label that shows the status of an object, such as an order, payment or fulfillment.
• SBanner<s-banner>A prominent message that surfaces important information, warnings or errors at the top of a page or section.
• SEmptyState<s-empty-state>Explains why a view has no content yet and points merchants to the first action to take.
• SProgress<s-progress>A progress bar that shows how far a task has advanced toward its maximum value.
• SSpinner<s-spinner>An animated indicator that content or an action is loading.

Forms

• SCheckbox<s-checkbox>A single checkbox for a yes/no choice, bound to its checked state with v-model.
• SChoice<s-choice>One option inside a choice list.
• SChoiceList<s-choice-list>A group of radio buttons or checkboxes for picking one or several options.
• SColorField<s-color-field>A text input for entering a color value, with an optional alpha channel.
• SColorPicker<s-color-picker>A visual control for picking a color.
• SDateField<s-date-field>An input for entering a date.
• SDatePicker<s-date-picker>A calendar for selecting a single date or a date range.
• SDropZone<s-drop-zone>A file upload area that accepts files by drag and drop or from a file picker.
• SEmailField<s-email-field>A text input for email addresses.
• SMoneyField<s-money-field>A numeric input for monetary amounts.
• SNumberField<s-number-field>A numeric input with optional minimum, maximum and step.
• SOption<s-option>One option inside a select.
• SOptionGroup<s-option-group>Groups related options inside a select under a shared label.
• SPasswordField<s-password-field>A text input for passwords that masks what is typed.
• SSearchField<s-search-field>A text input for search queries.
• SSelect<s-select>A dropdown for choosing one option from a list.
• SSwitch<s-switch>A toggle switch that turns a setting on or off.
• STextArea<s-text-area>A multi-line text input for longer content such as notes or descriptions.
• STextField<s-text-field>A single-line text input with label, placeholder, validation error and help text.
• SUrlField<s-url-field>A text input for web addresses.

Layout and structure

• SBox<s-box>A generic container for padding, background, border, radius and sizing.
• SDivider<s-divider>A horizontal or vertical line that separates content.
• SGrid<s-grid>A CSS grid container for laying out content in rows and columns.
• SGridItem<s-grid-item>A child of a grid that can span several columns or rows.
• SListItem<s-list-item>One item inside an ordered or unordered list.
• SOrderedList<s-ordered-list>A numbered list.
• SPage<s-page>The top-level page layout, with a heading, page actions and content areas.
• SQueryContainer<s-query-container>Turns an element into a size container so its children can adapt to its width with container queries.
• SScrollBox<s-scroll-box>A container that scrolls its content when it overflows.
• SSection<s-section>Groups related content, with an optional heading, subheading and actions.
• SStack<s-stack>Arranges its children in a row or column with consistent spacing and alignment.
• STable<s-table>A table for structured data, with optional pagination, a loading state and a list layout on small screens.
• STableBody<s-table-body>The body of a table, holding its data rows.
• STableCell<s-table-cell>One cell in a table row.
• STableHeader<s-table-header>One column header in a table.
• STableHeaderRow<s-table-header-row>The row of column headers at the top of a table.
• STableRow<s-table-row>One row of data in a table.
• SUnorderedList<s-unordered-list>A bulleted list.

Media and visuals

• SAvatar<s-avatar>Shows a person's or business's image, or their initials when there is no image.
• SIcon<s-icon>Displays an icon from the Polaris icon set by name.
• SImage<s-image>Displays an image with control over aspect ratio, fit, borders and lazy loading.
• SThumbnail<s-thumbnail>A small, fixed-size preview image of a product or file.

Overlays

• SModal<s-modal>A dialog overlay for focused tasks and confirmations, opened by a command or a method call.
• SPopover<s-popover>Floating content anchored to the button that opens it.

Typography and content

• SChip<s-chip>A static label for a tag or attribute, optionally removable.
• SHeading<s-heading>A heading that titles a page section.
• SNumber<s-number>Displays a number you have already formatted, with typography, tone and color styling.
• SParagraph<s-paragraph>A block of body text.
• SText<s-text>Inline text with tone, weight and emphasis styling.
• STooltip<s-tooltip>A short label that appears when another element is hovered or focused.