Section library
List the catalog
Add one to your theme
1.
src/sections/HomepageHero.tsx with the library's component code2.
schemas/sections/homepage-hero.json (the library's schema, with its type field renamed to your slug)3.
src/main.tsx4.
theme.json's home presetThe 15 entries
Hero + landing
hero-with-cta
featured-products
<ProductCard> + useProducts({ limit }). Heading + grid (2–6 cols responsive).image-with-text
multi-column
Trust + conversion
testimonials
logo-cloud
newsletter-signup
/api/customer/newsletter/subscribe. Inline success state, double-opt-in optional.countdown-timer
Content
rich-text
<RichText> from the SDK. Sanitized HTML body, alignment, max-width. Most flexible content section.faq-accordion
<details>/<summary> for zero-JS expand. Each block: question, answer.featured-blog-posts
useNavigation() + a blog handle.Commerce-specific
collection-list
<CollectionCard> + useCollections({ limit }). Same shape as featured-products but for categories.announcement-bar
Layout
video-embed
<iframe>, or raw <video> with mp4. Lazy-loaded, with thumbnail-first poster.contact-map
Entry anatomy
numu-theme-cli/src/section-library/entries/<slug>.ts:import type { SectionLibraryEntry } from "../index";
export const heroWithCta: SectionLibraryEntry = {
slug: "hero-with-cta",
name: "Hero with CTA",
description: "Full-bleed hero with headline + subtitle + 2 CTAs",
component: `
import type { SectionProps } from "@numueg/theme-sdk";
export default function HeroWithCTA({ settings }: SectionProps) {
// ... full implementation, self-contained
}
`,
schema: {
type: "hero-with-cta",
name: "Hero with CTA",
locales: { ar: { name: "البانر الرئيسي" } },
settings: [
{ type: "text", id: "headline", label: "Headline", default: "..." },
// ...
],
blocks: [],
presets: [],
},
};Why self-contained
import shared utilities from each other. Each one is fully independent so:Adding a new entry (platform devs)
1.
numu-theme-cli/src/section-library/entries/<slug>.ts. Follow the existing shape — slug, name, description, component, schema.2.
src/section-library/index.ts's LIBRARY array.3.
numu-theme add-section test-x --from-library <slug> against a scratch theme. Run numu-theme dev and verify the section renders + the settings appear in the customizer.4.
5.
type must equal the slug (the CLI renames it when adding to a theme, so this is just the default)schema.locales.ar at minimum (we ship MENA-first)Modified at 2026-09-19 15:52:50