# @surecart/components > The @surecart/components package contains all the core web components that other packages rely on. Latest version **2.19.1** (published 2024-03-06) · MIT license · 0 weekly downloads ## Install ```sh npm install @surecart/components pnpm add @surecart/components yarn add @surecart/components bun add @surecart/components ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; large bundle. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.19.1 | | Published | 2024-03-06 | | First published | 2022-06-17 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 26 | | Unpacked size | 35.2 MB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Maintainers | ajgagnon | ## Links - npm: https://www.npmjs.com/package/@surecart/components - Repository: https://github.com/surecart/surecart-wp - Homepage: https://github.com/surecart/surecart-wp#readme - Issues: https://github.com/surecart/surecart-wp/issues - npm.io page: https://npm.io/package/@surecart/components ## Dependencies (26) - [clsx](https://npm.io/package/clsx.md) ^1.1.1 - [sass](https://npm.io/package/sass.md) ^1.29.0 - [import](https://npm.io/package/import.md) ^0.0.6 - [fuse.js](https://npm.io/package/fuse.js.md) ^6.4.6 - [@tiptap/pm](https://npm.io/package/@tiptap/pm.md) ^2.0.0-beta.212 - [@xstate/fsm](https://npm.io/package/@xstate/fsm.md) ^1.6.2 - [@tiptap/core](https://npm.io/package/@tiptap/core.md) ^2.0.0-beta.212 - [@stencil/store](https://npm.io/package/@stencil/store.md) ^2.0.0 - [@wordpress/url](https://npm.io/package/@wordpress/url.md) ^3.1.1 - [@wordpress/i18n](https://npm.io/package/@wordpress/i18n.md) ^4.2.3 - [@floating-ui/dom](https://npm.io/package/@floating-ui/dom.md) ^0.5.0 - [@wordpress/hooks](https://npm.io/package/@wordpress/hooks.md) ^3.2.1 - [stencil-wormhole](https://npm.io/package/stencil-wormhole.md) ^3.4.1 - [@paypal/paypal-js](https://npm.io/package/@paypal/paypal-js.md) ^5.0.4 - [@stripe/stripe-js](https://npm.io/package/@stripe/stripe-js.md) ^1.32.0 - [@tiptap/starter-kit](https://npm.io/package/@tiptap/starter-kit.md) ^2.0.0-beta.212 - [country-region-data](https://npm.io/package/country-region-data.md) ^2.0.0 - [@wordpress/api-fetch](https://npm.io/package/@wordpress/api-fetch.md) ^6.11.0 - [@storybook/addon-a11y](https://npm.io/package/@storybook/addon-a11y.md) ^6.5.6 - [stencil-store-storage](https://npm.io/package/stencil-store-storage.md) ^0.2.0 - [localized-address-format](https://npm.io/package/localized-address-format.md) ^1.1.0 - [@storybook/testing-library](https://npm.io/package/@storybook/testing-library.md) ^0.0.11 - [@storybook/addon-interactions](https://npm.io/package/@storybook/addon-interactions.md) ^6.5.6 - [@tiptap/extension-placeholder](https://npm.io/package/@tiptap/extension-placeholder.md) ^2.0.0-beta.220 - [@babel/plugin-transform-react-jsx](https://npm.io/package/@babel/plugin-transform-react-jsx.md) ^7.17.3 - [@tiptap/extension-character-count](https://npm.io/package/@tiptap/extension-character-count.md) ^2.0.0-beta.220 ## Recent versions - 2.19.1 (latest) — 2024-03-06 - 1.0.1-beta.1 (beta) — 2023-05-04 - 2.19.0 — 2024-03-05 - 2.14.0-beta1 — 2023-12-13 - 1.0.1-beta.0 — 2023-05-04 - 1.0.0 — 2023-03-02 - 0.0.9 — 2022-08-02 - 0.0.7 — 2022-06-17 - 0.0.6 — 2022-06-17 - 0.0.5 — 2022-06-17 - 0.0.4 — 2022-06-17 - 0.0.3 — 2022-06-17 - 0.0.2 — 2022-06-17 - 0.0.1 — 2022-06-17 ## README ![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square) ## Themes A theme is nothing more than a stylesheet that defines design tokens and applies custom styles to components. To create a theme, you will need a decent understanding of CSS, including CSS Custom Properties and the ::part selector. ### All themes are scoped to classes using the `data-theme` attribute convention, where the value is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use light and dark, respectively. A custom theme called "Purple Power", for example, would use a class called sl-theme-purple-power. This data attribute can be placed in any parent ancestor on a page, for example, on a `sc-form` element apply a theme style everything inside the form. ### Developing a Theme To develop a theme, we utilize [StoryBook](https://storybook.js.org/) to lay out all the components and apply theme styles. You should find a file called `themes.stories.ts` in the root of the components directory. This story will allow you to see all available components on a page so you can add css for your theme style to change the look of the components. ### Running The Storybook Command To start the development process, please run this command (in the packages/components directory) ``` yarn watch & yarn storybook ``` This will open up storybook in a new browser window and hot-reload any changes. --- _Source: https://npm.io/package/@surecart/components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._