SureCart Components

SureCart ships with a library of web components that allow you to add, extend, or modify functionality without needing to code everything from scratch. These components can be used to match the UI, ensure accessibility, add additional checkout fields, and much more.


Web components have an additional benefit of "style encapsulation" via the Shadow Dom. This feature prevents styles from other parts of a page from affecting these components, making them safe to use regardless of the styles applied elsewhere on the page.

Additional benefits include:

  • πŸ‘ Accessibility through ARIA roles, states, properties, and keyboard support is crucial for inclusivity.
  • πŸ–₯ Design considerations for both mobile and desktop ensure a seamless user experience.
  • πŸ‘Œ Touch input friendliness is essential for modern devices.
  • 🎨 The flexibility of styling with CSS variables and included themes allows for customization.
  • 🏎️ Lazy loading contributes to performance optimization.
  • 🧩 The ability to build and extend components easily is a big plus.
  • πŸ—‘οΈ Lightweight components are efficient.
  • πŸ’ͺ TypeScript integration provides type safety.
  • 🏠 Compatibility with HTML/CSS/JS makes it accessible to a broad range of developers.

SureCart Components Documentation

For now, our components documentation kept in our previous documentation link - Components Documentation

Note: We are in the process of migrating all of our documentation to this new platform. Until all of our docs are moved here, you can check the component docs from that site.