Theme gallery

{
  "theme": "directory",
  "title": "mdxui: one record, every brand",
  "description": "mdxui renders a bounded JSON record as a page under any Theme.",
  "meta": { "canonical": "https://next.mdxui.dev/", "type": "website" },
  "frame": "none",
  "sections": [
    {
      "kind": "nav",
      "shell": { "inset": "bleed", "density": "none", "surface": "glass", "sticky": true },
      "block": {
        "type": "nav",
        "menu": "none",
        "brand": { "href": "/", "text": "mdxui" },
        "links": [
          ["/docs", "Docs"],
          ["/docs/themes", "Themes"],
          ["/pages/home.json", "This page as JSON"]
        ]
      }
    },
    {
      "kind": "hero",
      "block": {
        "type": "hero",
        "title": "One record. Every brand.",
        "layout": "split",
        "stack": 560,
        "lede": "Your agent writes the record, never the markup. mdxui renders it as a page in your brand's Theme. A rebrand is one line.",
        "actions": [
          { "href": "#start", "label": "Give it to your agent", "kind": "solid" },
          { "href": "/components/cross/home/certificate", "label": "See the next brand", "kind": "ghost" }
        ],
        "fine": [],
        "specimen": {
          "blocks": [
            {
              "type": "terminal",
              "variant": "plain",
              "title": "pages/home.json, lines 22–28",
              "lang": "json",
              "copy": false,
              "lines": [
                "{",
                "  \"kind\": \"hero\",",
                "  \"block\": {",
                "    \"type\": \"hero\",",
                "    \"title\": \"One record. Every brand.\",",
                "    \"layout\": \"split\",",
                "    \"stack\": 560,",
                "    …"
              ]
            }
          ]
        }
      },
      "shell": { "inset": "contained", "density": "hero", "surface": "tint" }
    },
    {
      "kind": "band",
      "shell": { "inset": "contained", "density": "compact" },
      "block": {
        "type": "stats",
        "items": [
          { "value": "27", "label": "Section types, drawn once by hand" },
          { "value": "64", "label": "Characters a hero title holds" },
          { "value": "7 KB", "label": "One record, this whole page" }
        ]
      }
    },
    {
      "kind": "section",
      "shell": { "id": "bound", "inset": "contained", "density": "section", "surface": "plate" },
      "block": {
        "type": "terminal",
        "variant": "plain",
        "title": "Titles stop at 64.",
        "lang": "js",
        "copy": false,
        "lines": [
          "const hero = page.sections[1].block;",
          "hero.title = 'A truly stunning, '",
          "  + 'beautiful and modern page '",
          "  + 'for every brand you launch.';",
          "const [{ path, maximum }] = PageSchema",
          "  .safeParse(page).error.issues;",
          "// path: sections.1.block.title",
          "// maximum: 64",
          "hero.title = 'One record. Every brand.';",
          "PageSchema.safeParse(page).success;",
          "// true"
        ]
      }
    },
    {
      "kind": "section",
      "shell": { "id": "brands", "inset": "contained", "density": "section" },
      "block": {
        "type": "product-list",
        "title": "This record, five brands",
        "note": "theme: \"directory\"",
        "view": "list",
        "rows": [
          {
            "href": "/components/cross/home/certificate#brands",
            "mark": "badge-check",
            "name": "certificate",
            "summary": "IBM Plex Sans, IBM Plex Mono"
          },
          {
            "href": "/components/cross/home/vaultline#brands",
            "mark": "landmark",
            "name": "vaultline",
            "summary": "Newsreader, Public Sans, IBM Plex Mono"
          },
          {
            "href": "/components/cross/home/quaypoint#brands",
            "mark": "ship",
            "name": "quaypoint",
            "summary": "Space Grotesk, Inter, JetBrains Mono"
          },
          {
            "href": "/components/cross/home/callboard#brands",
            "mark": "ticket",
            "name": "callboard",
            "summary": "Bricolage Grotesque, Instrument Sans, DM Mono"
          },
          {
            "href": "/#brands",
            "mark": "list",
            "name": "directory",
            "summary": "Inter, JetBrains Mono",
            "tag": "This page"
          }
        ]
      }
    },
    {
      "kind": "band",
      "shell": { "inset": "contained", "density": "section", "surface": "tint" },
      "block": { "type": "statement", "text": "Ask an AI site generator for one edit and it redraws the page. mdxui drew the design once, *so no edit can.*" }
    },
    {
      "kind": "closing",
      "shell": { "id": "start", "inset": "contained", "density": "closing", "background": "glow" },
      "block": {
        "type": "closing",
        "layout": "split",
        "head": {
          "eyebrow": "Alpha, pinned, on npm",
          "title": "Hand it to your agent.",
          "lede": "Paste these five lines. Your agent rewrites this record for your business and shows it in two Themes."
        },
        "specimen": {
          "blocks": [
            {
              "type": "agent-prompt",
              "label": "Paste into your agent",
              "lines": [
                "Read https://next.mdxui.dev/llms.txt, then fetch https://next.mdxui.dev/pages/home.json, a page record that parses.",
                "Run pnpm add @mdxui/site@7.0.0-alpha.0. It pins @mdxui/themes 7.0.0-alpha.0.",
                "Rewrite its strings for my business. Keep the Section types that fit.",
                "Parse it with PageSchema.safeParse. When it refuses, shorten the content, never the bound.",
                "Render it with renderPage under two of the 5 Themes and save both HTML files."
              ]
            }
          ]
        },
        "actions": [
          { "href": "/docs/start/quickstart", "label": "Or run the quickstart", "kind": "ghost" }
        ]
      }
    },
    {
      "kind": "footer",
      "shell": { "inset": "contained", "density": "footer" },
      "block": {
        "type": "footer",
        "layout": "columns",
        "brand": { "href": "/", "text": "mdxui" },
        "columns": [
          {
            "title": "Docs",
            "links": [
              ["/docs", "Introduction"],
              ["/docs/start/quickstart", "Quickstart"],
              ["/docs/sections", "Section types"],
              ["/docs/themes", "Theming"]
            ]
          },
          {
            "title": "For agents",
            "links": [
              ["/llms.txt", "llms.txt"],
              ["/pages/home.json", "This page as JSON"],
              ["/schema.json", "schema.json"],
              ["/docs/maintainers/status", "Status"]
            ]
          },
          {
            "title": "Elsewhere",
            "links": [
              ["https://www.npmjs.com/package/@mdxui/site", "npm"],
              ["https://startupbuilder.dev", "Build a Startup"]
            ]
          }
        ],
        "note": ["startupbuilder.dev defines the Page.", "mdxui draws it."]
      }
    }
  ],
  "jsonLd": [
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      "name": "mdxui: one record, every brand",
      "url": "https://next.mdxui.dev/",
      "isBasedOn": "https://next.mdxui.dev/pages/home.json",
      "encoding": { "@type": "MediaObject", "contentUrl": "https://next.mdxui.dev/pages/home.json", "encodingFormat": "application/json" }
    }
  ]
}