menu
Menu
Mobify DevCenter
search_icon_focus

Component Library Overview

The Mobify Platform includes an extensive library of React components for creating your storefront. Each component has been optimized for responsive design and supports best practices for usability and accessibility.

We also offer a Sketch file that includes symbols for creating mockups using our components. See our guide to Using the Mobify UI Kit for more information.

Select a component from the sidebar navigation to access props tables, import statements, code examples, and design considerations.

What’s in the Code tab?

On each component page, we’ve included code examples that you can live edit without leaving your browser. We encourage you to experiment with these components and their props to learn how to customize them!

Editable code example

If you edit the source code below, the example component will re-render to reflect your edits.

amex-hint[icon]/bag/dark[icon]/basket/dark[icon]/caret/bottom/dark[icon]/caret/left/dark[icon]/caret/right/dark[icon]/caret/top/dark[icon]/cart/dark[icon]/caution/darkAmericanExpressCredit CardUnionPaydankortdinersclubDiscoverinterpayjcbmaestroMasterCarduatpVisavisa-electron[icon]/check/dark[icon]/chevron/bottom/dark[icon]/chevron/left/dark[icon]/chevron/right/dark[icon]/chevron/top/dark[icon]/close/darkvisa-mc-hint@3x[icon]/edit/dark[icon]/help/dark[icon]/info/dark[icon]/like/dark[icon]/location/dark[icon]/lock/dark[icon]/menu/dark[icon]/minus/dark[icon]/more/dark[icon]/payment/dark[icon]/plus/dark[icon]/review/dark[icon]/search/dark[icon]/shipping/dark[icon]/social/facebook/dark[icon]/social/google-plus/dark[icon]/social/instagram/dark[icon]/social/pinterest/dark[icon]/social/twitter/dark[icon]/social/yelp/dark[icon]/social/youtube/dark[icon]/star/dark[icon]/trash/dark[icon]/user/dark[icon]/zoom/dark