{"id":27734461,"url":"https://github.com/instantcommerce/instant-sdk-examples","last_synced_at":"2025-10-12T18:21:05.304Z","repository":{"id":265910724,"uuid":"601678940","full_name":"instantcommerce/instant-sdk-examples","owner":"instantcommerce","description":"A collection of helpful blocks and components built with the Instant SDK","archived":false,"fork":false,"pushed_at":"2023-03-16T12:45:53.000Z","size":203,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-20T18:52:53.463Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://docs.instantcommerce.io/developer-documentation/getting-started/installation","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/instantcommerce.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-14T15:31:27.000Z","updated_at":"2023-10-31T14:32:31.000Z","dependencies_parsed_at":"2024-12-01T14:00:27.288Z","dependency_job_id":null,"html_url":"https://github.com/instantcommerce/instant-sdk-examples","commit_stats":null,"previous_names":["instantcommerce/instant-sdk-examples"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instantcommerce%2Finstant-sdk-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instantcommerce%2Finstant-sdk-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instantcommerce%2Finstant-sdk-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instantcommerce%2Finstant-sdk-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/instantcommerce","download_url":"https://codeload.github.com/instantcommerce/instant-sdk-examples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251319605,"owners_count":21570427,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-28T13:10:53.701Z","updated_at":"2025-10-12T18:21:00.267Z","avatar_url":"https://github.com/instantcommerce.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Instant SDK examples\n\nThis example project contains custom tailwind config, theming and components to make the code closely representative of our storefront code. In the future we will provide more direct access to our components and admin customization settings to increase the quality, and consistency of custom SDK blocks.\n\n## Getting Started\n\nRead our [documentation about installing, running, and, authenticating the SDK CLI.](https://docs.instantcommerce.io/developer-documentation/getting-started/start#installing-dependencies)\n\nIf you use the `instant-sdk-example` project as a starting point, rename \"your-organization\" in the `instant.config.json` to your organization slug. \n\n## Tailwind config\n\nThe tailwind config in this example project is a close representation of the variables we use in our storefront. These are subject to change in the storefront.\n\n## Store’s primary and grayscale colors\n\nThe `setStoreColors` helper enables easy usage of the store’s primary and grayscale colors. It can be used with tailwind’s colour utilities and/or with CSS variables.\n\nWith tailwind: `className=”bg-primary-500 text-gray-100”`\n\nWith CSS variables:\n\n    .section {\n      background-color: var(--color-primary-500);\n      color: var(--color-gray-100);\n    }\n\nThis helper fetches the store’s colors and creates new CSS variables. In addition these variables are assigned to primary and grayscale shades in our tailwind config (`tailwind.config.cjs`).\n\nTo use `setStoreColors`, simply spread the helper in your section’s style prop:\n\n    \u003csection style={{ ...setThemeColors() }}\u003e\n      \u003cdiv className=\"text-primary-700\"\u003eHello\u003c/div\u003e\n    \u003c/section\u003e\n\n## Theming your sections\n\nMost of our native sections have themes to enable fast color customization. To facilitate a similar setup in the example project, we have created the `setSectionTheme` helper and added four themes: light, primary, primary inverted and dark. In many ways it’s just like the `setStoreColors` helper, except that, when using the generated CSS variables through tailwind or CSS, you have \"theme\" instead of \"primary\" and \"gray\" and you have \"elements\" instead of \"shades\".\n\nUsage with tailwind: `className=”bg-theme-bg text-theme-text”`\n\nWith CSS variables:\n\n    .section {\n      background-color: var(--color-theme-bg);\n      color: var(--color-theme-text);\n    }\n\n`setSectionTheme` creates CSS variables that reference the store’s colors as set by `setStoreColors`:\n\n    --color-primary-700: #175CD3;\n    --color-bg: var(--color-primary-700);\n\n    .bg-theme-bg {\n      background-color: var(--color-bg);\n    }\n\nYou can access the variables using `setSectionTheme` and passing the section’s theme to it:\n\n    \u003csection\n      style={{\n        ...setThemeColors(),\n        ...setSectionTheme(theme),\n      }}\n    \u003e\n    ...\n    \u003c/section\u003e\n\nTo view the full list of elements go to `tailwind.config.cjs line 35`. To view which store colors are assigned to which elements in which themes, check out `src/config/setSectionTheme.ts`. Feel free to adjust this file to your liking, but keep in mind that there will be inconsistencies between the native storefront's section themes and yours if you do.\n\n## Style overrides\n\nWe realized we need to facilitate setups that use more than four different themes, so that you can overwrite some or all colors of a theme. For this reason, you’ll see our customisation schemas contain a lot of color fields such as `titleColor`, `backgroundColor`, and the like, where we pass inline styles to overwrite the theme colors in this example project. For instance:\n\n    \u003cParagraph\n      className=\"text-theme-title\"\n      style={{ ...(!!textColor ? { color: textColor } : {}) }}\n    \u003e\n      Title\n    \u003c/Paragraph\u003e\n\nThis goes hand-in-hand with section theming, but it is optional (just like everything else in this example project).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finstantcommerce%2Finstant-sdk-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finstantcommerce%2Finstant-sdk-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finstantcommerce%2Finstant-sdk-examples/lists"}