Sign inStart for free

Documentation

Storefront components

Everything you can place in your MDX pages. Commerce components render live against your catalog; layout and content components keep pages consistent — all sandboxed by the platform.

Start building

Commerce

Data-wired components that render live against your catalog — place them in MDX, the platform supplies the data.

<ProductGrid />

Responsive product listing with optional category, query, and limit. Refines automatically from FacetFilter URL state.

<ProductGrid category="hvac" limit="8" />

<ProductList />

Single-column variant of ProductGrid for editorial layouts.

<ProductList limit="4" />

<ProductCard />

One product, resolved by SKU, slug, or id — ideal for merchandising callouts.

<ProductCard sku="HVC-2041" />

<ProductDetail />

Full product page with specs and attributes. Reads the slug from the URL or a prop.

<ProductDetail />

<SearchResults />

Catalog search form plus results, driven by the ?q= parameter. ProductSearch is an alias.

<SearchResults />

<FacetFilter />

Filter controls that refine ProductGrid through URL state.

<CategoryNav />

Navigation across your catalog taxonomy.

<Price />

Locale-aware price formatting using your store currency.

<Price amount="129.99" />

<InventoryBadge />

Stock status indicator for lists and detail pages.

<AddToQuote />

Quote-request entry point for B2B buying flows.

Core

The building blocks every storefront starts with.

<Hero />

Branded hero section. Defaults to your store name; override with title and subtitle.

<Hero title="Welcome" subtitle="Shop the catalog" />

<Snippet />

Renders a reusable MDX block from your snippets/ directory.

<Snippet name="hero" />

<ContentBlock />

Styled wrapper for merchandising and editorial content.

Layout

Structure pages without writing CSS.

<Card />

Card with optional title, icon, link, and horizontal layout.

<Card title="Shipping" icon="truck" href="/shipping" />

<CardGroup />

Responsive grid of Cards.

<Columns />

Multi-column layout container.

<Accordion />

Collapsible content section.

<AccordionGroup />

Grouped accordions.

<Tabs />

Tabbed content with Tab children.

<Steps />

Numbered step-by-step walkthroughs.

<Frame />

Framed media or image container.

<Divider />

Horizontal separator.

<Expandable />

Inline expandable detail section.

Content

Callouts, badges, and inline elements for rich pages.

<Callout />

Typed callout — note, info, tip, warning, or check.

<Callout type="tip">Order before 2pm.</Callout>

<Note />

Note callout shorthand.

<Info />

Info callout shorthand.

<Tip />

Tip callout shorthand.

<Warning />

Warning callout shorthand.

<Check />

Success callout shorthand.

<Banner />

Full-width announcement banner.

<Badge />

Small status or label badge.

<Button />

Styled link button with safe URLs.

<Icon />

Named icon from the platform icon set.

<Tooltip />

Hover tooltip for inline hints.

<Avatar />

Circular image or initials.

<Breadcrumbs />

Hierarchical navigation trail.

<Pagination />

Previous/next page navigation.

<Code />

Syntax-styled code block.

<CodeGroup />

Grouped code blocks with titles.

Safe by design

Storefront MDX compiles through a strict allowlist — only these components and a safe subset of HTML render. Imports, scripts, and raw expressions are stripped before anything reaches your buyers. Read more on our Security page.