Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

block · panel

Panel

A neutral outlined surface for grouped content and actions.

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

Block

Panel

Release candidate

Version 0.2.0 is ready for its final accessibility review.

Review form
Version
0.2.0
Checks
All passed
Bundle
Zero runtime dependencies
All required checks passed. The release is ready to publish.

Composition

  • Choose a section, article or div that matches the content, then compose header/heading/actions, content and optional footer regions.

Public API

class mado-ui-panel / header / heading / title / description / actions / content / footer
Panel surface and structural hooks.

Detected public classes

  • .mado-ui-panel
  • .mado-ui-panel-actions
  • .mado-ui-panel-content
  • .mado-ui-panel-description
  • .mado-ui-panel-footer
  • .mado-ui-panel-header
  • .mado-ui-panel-heading
  • .mado-ui-panel-title

Detected public CSS properties

  • --mado-ui-color-border
  • --mado-ui-color-surface
  • --mado-ui-color-text
  • --mado-ui-color-text-muted
  • --mado-ui-panel-actions-gap
  • --mado-ui-panel-background
  • --mado-ui-panel-border
  • --mado-ui-panel-color
  • --mado-ui-panel-footer-gap
  • --mado-ui-panel-footer-justify
  • --mado-ui-panel-gap
  • --mado-ui-panel-header-gap
  • --mado-ui-panel-padding
  • --mado-ui-panel-radius
  • --mado-ui-panel-shadow
  • --mado-ui-radius-md
  • --mado-ui-space-1
  • --mado-ui-space-2
  • --mado-ui-space-3
  • --mado-ui-space-4
  • --mado-ui-space-5

Accessibility contract

  • The root class adds no role. A section or article needs an appropriate heading relationship when it should enter document structure.
  • Do not turn the whole surface into a click target; use explicit native links or buttons for actions.

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.