web.dev.ui
Docs menuMDX

Quick Start

Patterns

Docs/ Components/ MDX

MDX

Documentation primitives and live sandboxes.

Source coverage

The UI package mirrors the useful MDX surface from the local source tree and exposes it through @decadez/web-dev-ui/mdx.

BlogCardChallengeChallengeNavigationChallengesClearButtonCodeBlockCodeDiagramConsoleBlockConsoleBlockMultiConsoleLogLineCustomPresetCustomThemeDiagramDiagramGroupDownloadButtonErrorDecoderErrorMessageExpandableCalloutExpandableExampleH1H2H3H4H5HintInlineCodeIntroIsInTocContextLanguagesContextLearnMoreLinkLoadingOverlayMDXComponentsNavigationBarOpenInCodeSandboxButtonOpenInTypeScriptPlaygroundButtonPackageImportPreviewReadBlogPostRecapReloadButtonRscFileBridgeSandpackClientSandpackConsoleSandpackRSCSandpackRSCRootSandpackRootSandpackWithHTMLOutputSimpleCalloutSolutionTeamMemberTerminalBlockTocContextYouWillLearnCardcreateFileMaprunESLinttemplatetemplateRSCuseSandpackLint

Prose components

Intro gives MDX pages a stronger opening paragraph.

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

Paragraph text supports InlineCode and Link.

ExpandableCallout
ExpandableExample
import { MDXSandbox } from "@decadez/web-dev-ui/mdx"

Learning blocks

You will learn

  • How the component behaves.
  • Which states to test.

Recap

Recap wraps summary content.

BlogCardA linked editorial card for docs content.
decadez

UI package maintainer

LearnMore links readers to deeper material.

Read Post

Diagrams and code

Diagram
State A -> State B
const state = "ready";
pnpm --filter @decadez/docs dev
logCompiled successfully
warnPreview is editable
errorExample error line

Challenges

Wire the component

Use the exported MDX primitives.

Hint
Start from the package import.
Solution
Use the components from the mdx entrypoint.
1 / 2

Sandbox

The main sandbox uses Sandpack: source files create an isolated live preview.

import "./styles.css";

export default function App() {
  return (
    <main className="demo">
      <section className="demo-card">
        <p>Ship docs examples as live component states.</p>
        <button type="button">Preview action</button>
      </section>
    </main>
  );
}
Loading sandbox

Sandbox parts

Provider-bound pieces such as NavigationBar, Preview, Console, LoadingOverlay, RscFileBridge, and the action buttons render inside the live sandbox above. Standalone helpers can be composed directly.

ErrorMessage

Sandbox errors use the same surfaced shape as the live preset.
Playground

Contexts