Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

primitive · code

Native code

Opt-in styles for native inline code, code blocks and keyboard input.

Install with npx @madojs/ui@latest add code.

Primitive

Code

Install a recipe with mado-ui add code and keep the copied source. 

import { html, render } from "@madojs/mado";

const greeting = (name: string) => html`<h1>Hello, ${name}</h1>`;

render(greeting("browser"), document.querySelector("#app"));

Press Tab to focus a scrollable code block.

Composition

  • Use inline code for identifiers, a keyboard-reachable pre/code pair for overflowable examples, and kbd for user input.

Public API

class mado-ui-code
Inline code and nested code typography.
class mado-ui-code-block
Scrollable preformatted block surface.
class mado-ui-kbd
Keyboard-input presentation for a native kbd element.

Detected public classes

  • .mado-ui-code
  • .mado-ui-code-block
  • .mado-ui-kbd

Detected public CSS properties

  • --mado-ui-code-background
  • --mado-ui-code-block-background
  • --mado-ui-code-block-border
  • --mado-ui-code-block-color
  • --mado-ui-code-block-focus-ring
  • --mado-ui-code-block-font-size
  • --mado-ui-code-block-line-height
  • --mado-ui-code-block-padding
  • --mado-ui-code-block-radius
  • --mado-ui-code-border
  • --mado-ui-code-color
  • --mado-ui-code-font-family
  • --mado-ui-code-font-size
  • --mado-ui-code-font-weight
  • --mado-ui-code-padding
  • --mado-ui-code-radius
  • --mado-ui-code-tab-size
  • --mado-ui-color-action
  • --mado-ui-color-border
  • --mado-ui-color-surface
  • --mado-ui-color-surface-soft
  • --mado-ui-color-text
  • --mado-ui-focus-ring
  • --mado-ui-kbd-background
  • --mado-ui-kbd-border
  • --mado-ui-kbd-color
  • --mado-ui-kbd-font-size
  • --mado-ui-kbd-font-weight
  • --mado-ui-kbd-padding
  • --mado-ui-kbd-radius
  • --mado-ui-kbd-shadow
  • --mado-ui-radius-md
  • --mado-ui-radius-sm
  • --mado-ui-space-4

Accessibility contract

  • Code remains text and keeps native selection and copy behavior.
  • An overflowing code block receives tabindex="0" so keyboard users can reach and scroll it.

Keyboard

  • The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

  • Focus remains on native links, buttons or controls. Presentational wrappers never become focusable.

Fallback

  • Without the copied stylesheet, the semantic source HTML remains readable and operable.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.