@octanest/mart-ui

The Octanest storefront UI kit: around 60 React components (hero, product grids and cards, categories, cart, checkout, product page, FAQ…), 12 theme packs with palettes, and the section renderer that draws pages built in the Octanest console.

npm install @octanest/mart-ui

import "@octanest/mart-ui/styles.css";
import { StorefrontShell, SectionsList, HeroBanner, ProductGrid } from "@octanest/mart-ui";

• Render console-built pages: <SectionsList sections={page.sections} data={page.data} /> inside a <StorefrontShell> (or use @octanest/commerce-next's <StorefrontPage>).
• Hand-build pages: use the components directly; they take the store's theme from ThemeProvider / StorefrontShell tokens.
• Section metadata: SECTION_DEFINITIONS lists every section's fields, layouts (variant) and defaults; themePalettes(packId) lists palettes.
• Custom sections: defineSection({ id, name, props }) registers a section the Builder can edit. The id you pass is a short name; the registered id is app:custom/<id>. props is a list of { name, type } where type is string, number, or boolean. This does not change the app extension manifest (storefront.block stays as it is).

import { defineSection } from "@octanest/mart-ui";

export default [
  defineSection({
    id: "promo-note",
    name: "Promo note",
    props: [
      { name: "title", type: "string" },
      { name: "count", type: "number" },
      { name: "showBadge", type: "boolean" },
    ],
  }),
];

Put that module in the app as octanest.sections.mjs (the defineSection side file), or write the same list as octanest.sections.json. octanest dev and octanest deploy upload whichever file is present. If both exist, the side file replaces a JSON entry with the same id.

React 18 or 19. Docs: https://docs.octanest.com/developers

License

Apache-2.0 — see LICENSE.