Marketing hero

An eyebrow, a display heading, a lede and a feature grid. The file sets layout and leaves every size, weight and colour to the ramp, so one copy renders correctly on both surfaces.

Metrics panel

Tabular figures wherever a value updates in place, proportional for the headline. The panel size rides the heading ladder, so these stats retune with the headings beside them.

Pricing tiers

Each tier's feature list uses TypographyList variant="ui" to match the 13px card copy around it. The prose variant sets bullets at reading size, which would put two body sizes on one surface.

Docs page

Steps, a callout, a prose list and an FAQ, all of it static. The FAQ uses Disclosure, which works before hydration. Switch to Accordion for animation or managed selection.

Article index

The meta row is what pulls /essay into a listing page. PostDate formats through formatPostDate, the same function to call when generating an OG image, so a card and its social preview print the same date.

An MDX article

Add to your configuration files and import the article shell. The article shell composes the essay pieces one by one, since its sections come from the markdown headings.

First the element map, a plain object. The router and the image component ship with the package, so it takes no arguments.

// mdx-components.tsx — the file convention @next/mdx calls with no arguments
import type { MDXComponents } from "mdx/types";
import { proseMdxComponents } from "@supertype.ai/foundations/mdx";

export function useMDXComponents(): MDXComponents {
  return proseMdxComponents as MDXComponents;
}

Then the code fences. rehypeProseCode writes --shiki-light and --shiki-dark onto every token in place of a fixed colour. One compiled document then serves both themes, with shiki.css selecting which applies.

// source.config.ts — runs in bare Node, so it must not reach React
import { rehypeProseCode } from "@supertype.ai/foundations/rehype";

export default defineConfig({
  mdxOptions: { rehypePlugins: [rehypeProseCode] },
});

Then the page around the compiled content.

// app/notes/[slug]/page.tsx — the article shell around compiled MDX
import { extractHeadings, readingTime, EssayHeader, ReadingLayout,
         PostMetaRow, PostDate, ReadTime, TagPills,
         MetaDot } from "@supertype.ai/foundations/essay";

const headings = extractHeadings(source);  // { id, label, depth }[]
const minutes = readingTime(source);        // words / 200, rounded up

<EssayHeader eyebrow="Notes" title={frontmatter.title} />
<ReadingLayout headings={headings}>
  <PostMetaRow>
    <PostDate date={frontmatter.date} format="long" />
    <MetaDot />
    <ReadTime minutes={minutes} />
    <MetaDot />
    <TagPills tags={frontmatter.tags} />
  </PostMetaRow>
  {content}
</ReadingLayout>

You can see an example of MDX-rendered content in the blog section of Viably (Observability-first work operating system), which also uses the @supertype.ai/foundations package for its design system.