Components - MeoNode UI

The @meonode/ui library offers a comprehensive set of React components for building modern, type-safe user interfaces. Each component is implemented as a function, enabling a declarative development style and seamless TypeScript integration. The library covers a broad spectrum of HTML elements and common UI patterns, all tightly integrated with a flexible theming and styling system for consistent design across your application.

1. Theming and Style Management

Core components for managing application-wide theming and style injection.

Component	Description	Props	Example Usage
`ThemeProvider`	The Theme Provider component that supplies theming context to the application. This is required to access theme tokens (e.g., `theme.colors.primary`) in component props.	`theme`: The theme configuration object (required). `children`: The component tree to be themed (required).	ThemeProvider({ theme: { mode: 'light', system: { ... } }, children: Root({ children: [...] }) })
`StyleRegistry`	Manages and dynamically injects styles into the document head for consistent theming. This is essential for proper style hydration in SSR/SSG environments (like Next.js).	`children`: The application's React node tree (required).	StyleRegistry({ children: Node(App) })
`PortalProvider`	Manages the internal stack for the advanced portal system. Wraps components to enable overlay management.	`children`: The component tree (required).	PortalProvider({ children: [...] })
`PortalHost`	The target container where portals are rendered. Usually placed at the end of the root layout.	None	PortalHost()

2. Higher-Order Components (HOCs)

Factory functions that enhance components with additional capabilities and context.

HOC	Description	Signature/Type Usage	Example Usage
`Component`	A HOC factory that wraps MeoNode functions to create reusable standard React components. This ensures proper hook order preservation.	Takes a function that returns a MeoNode element, with optional generics for custom `Props`: `Component<Props>((props) => MeoNodeElement)`.	interface CardProps { title: string; } const Card = Component<CardProps>(({ title }) => Div({ children: H2(title) }));

3. Layout & Container Components

These components are primarily used for structural layout, positioning, and container grouping.

Component	HTML Tag	Description
`Div`	`<div>`	Represents a standard div element.
`Container`	`<div>`	Alias for `Div(...)`. Recommended for general-purpose container elements.
`Root`	`<div>`	Represents a root div element with full viewport dimensions and column flex layout (`100dvh`, `100dvw`).
`Column`	`<div>`	Represents a column layout using flexbox (`display: 'flex'`, `flexDirection: 'column'`).
`Row`	`<div>`	Represents a row layout using flexbox (`display: 'flex'`, `flexDirection: 'row'`).
`Grid`	`<div>`	Represents a grid layout (`display: 'grid'`).
`Center`	`<div>`	Represents a centered container with flexbox alignment (horizontally and vertically centered).
`Fixed`	`<div>`	Represents a fixed positioned element (`position: 'fixed'`).
`Relative`	`<div>`	Represents a relatively positioned element (`position: 'relative'`).
`Absolute`	`<div>`	Represents an absolutely positioned element (`position: 'absolute'`).
`Sticky`	`<div>`	Represents a sticky positioned element (`position: 'sticky'`).
`Static`	`<div>`	Represents a statically positioned element (`position: 'static'`).

4. Typography & Inline Text

These components handle text content, headings, and inline text semantics.

Component	HTML Tag	Description
`H1`	`<h1>`	Creates an h1 heading element node.
`H2`	`<h2>`	Creates an h2 heading element node.
`H3`	`<h3>`	Creates an h3 heading element node.
`H4`	`<h4>`	Creates an h4 heading element node.
`H5`	`<h5>`	Creates an h5 heading element node.
`H6`	`<h6>`	Creates an h6 heading element node.
`P`	`<p>`	Creates a paragraph element node.
`Text`	`<p>`	Alias for `P(...)`, recommended for general-purpose text content.
`Span`	`<span>`	Creates a span element node.
`Strong`	`<strong>`	Creates a strong element node for important text.
`Em`	`<em>`	Creates an em element node for emphasized text.
`Small`	`<small>`	Creates a small element node for side-comments and small print.
`Mark`	`<mark>`	Creates a mark element node for highlighted text.
`Pre`	`<pre>`	Creates a preformatted text element node.
`Code`	`<code>`	Creates a code element node for displaying code snippets.
`Br`	`<br>`	Represents a line break element.
`Abbr`	`<abbr>`	Represents an abbreviation or acronym.
`B`	`<b>`	Represents text that should be stylistically offset from normal prose (traditionally bold).
`Bdi`	`<bdi>`	Represents text that is isolated from its surroundings for bidirectional text formatting.
`Bdo`	`<bdo>`	Overrides the current text directionality.
`Cite`	`<cite>`	Represents the title of a work (e.g., a book, a song, an essay).
`Data`	`<data>`	Links a piece of content with a machine-readable translation.
`Dfn`	`<dfn>`	Represents a definition of a term.
`I`	`<i>`	Represents text in an alternate voice or mood (traditionally italic).
`Kbd`	`<kbd>`	Represents user input (typically keyboard input).
`Q`	`<q>`	Represents an inline quotation.
`Rp`	`<rp>`	Represents fallback parenthesis for ruby annotations.
`Rt`	`<rt>`	Represents the ruby text component of a ruby annotation.
`Ruby`	`<ruby>`	Represents a ruby annotation.
`S`	`<s>`	Represents text that is no longer accurate or relevant (strikethrough).
`Samp`	`<samp>`	Represents sample output from a computer program.
`Sub`	`<sub>`	Represents subscript text.
`Sup`	`<sup>`	Represents superscript text.
`Time`	`<time>`	Represents a specific period in time or a date.
`U`	`<u>`	Represents text with an unarticulated, non-textual annotation (traditionally underline).
`Var`	`<var>`	Represents a variable in a mathematical expression or programming context.
`Wbr`	`<wbr>`	Represents a word break opportunity.

5. Lists

Components for structured list content.

Component	HTML Tag	Description
`Ol`	`<ol>`	Represents an ordered list.
`Ul`	`<ul>`	Represents an unordered list.
`Li`	`<li>`	Represents a list item.
`Dl`	`<dl>`	Represents a description list.
`Dt`	`<dt>`	Represents a term in a description list.
`Dd`	`<dd>`	Represents a description in a description list.

6. Forms and Inputs

Components for building interactive forms.

Component	HTML Tag	Description
`Form`	`<form>`	Represents an HTML form.
`Label`	`<label>`	Represents a label for an input element.
`Input`	`<input>`	Represents an input element.
`Button`	`<button>`	Creates a button element node.
`Textarea`	`<textarea>`	Represents a textarea element for multiline text input.
`Select`	`<select>`	Represents a select dropdown element.
`Option`	`<option>`	Represents an option within a select element.
`Fieldset`	`<fieldset>`	Represents a fieldset element for grouping form elements.
`Legend`	`<legend>`	Represents a legend for a fieldset.
`Optgroup`	`<optgroup>`	Represents an option group within a select element.
`Output`	`<output>`	Represents the result of a calculation or user action.
`Datalist`	`<datalist>`	Contains a set of `<option>` elements for predefined options.

7. Media & Embedded Content

Components for handling images, video, audio, and external resources.

Component	HTML Tag	Description
`Img`	`<img>`	Represents an image element.
`Video`	`<video>`	Represents a video element.
`Audio`	`<audio>`	Represents an audio element.
`Picture`	`<picture>`	Represents a picture element.
`Source`	`<source>`	Represents a source element (for `<picture>` or `<video>`).
`Canvas`	`<canvas>`	Represents a canvas element.
`Iframe`	`<iframe>`	Represents an iframe element.
`Embed`	`<embed>`	Represents an integration point for an external application or interactive content.
`ObjectElement`	`<object>`	Represents an external resource (e.g., image, nested browsing context, plugin content).
`Param`	`<param>`	Defines parameters for an `<object>` element.
`MapElement`	`<map>`	Represents an image map, with clickable areas.
`Area`	`<area>`	Defines a client-side image map area.

8. Document Structure & Semantics

Core semantic elements for organizing document content.

Component	HTML Tag	Description
`Nav`	`<nav>`	Represents a navigation element.
`A`	`<a>`	Represents an anchor element.
`Main`	`<main>`	Represents the main content of a document (defaults to flex column).
`Header`	`<header>`	Represents a header element.
`Footer`	`<footer>`	Represents a footer element.
`Aside`	`<aside>`	Represents an aside element.
`Section`	`<section>`	Represents a section element.
`Article`	`<article>`	Represents an article element.
`Figure`	`<figure>`	Represents a figure element.
`Figcaption`	`<figcaption>`	Represents a figure caption element.
`Blockquote`	`<blockquote>`	Represents a blockquote element.
`Address`	`<address>`	Represents an address element.
`Dialog`	`<dialog>`	Represents a dialog element.
`Details`	`<details>`	Represents a details element (disclosure widget).
`Summary`	`<summary>`	Represents a summary element for a details disclosure box.
`Hgroup`	`<hgroup>`	Represents a heading group (used to group a set of `<h1>–<h6>` elements).
`Hr`	`<hr>`	Represents a thematic break between paragraph-level elements.
`Menu`	`<menu>`	Represents a group of commands that a user can perform or activate.
`Search`	`<search>`	Represents search or filtering controls.

9. Table Components

Components for building data tables.

Component	HTML Tag	Description
`Table`	`<table>`	Represents a table element.
`Thead`	`<thead>`	Represents a table header section.
`Tbody`	`<tbody>`	Represents a table body section.
`Tfoot`	`<tfoot>`	Represents a table footer section.
`Tr`	`<tr>`	Represents a table row.
`Th`	`<th>`	Represents a table header cell.
`Td`	`<td>`	Represents a table data cell.
`Caption`	`<caption>`	Represents a table caption.
`Colgroup`	`<colgroup>`	Represents a table column group.
`Col`	`<col>`	Represents a table column.

10. Head & Scripting Elements (Advanced)

Elements typically used in the document <head> or for scripting purposes.

Component	HTML Tag	Description
`Html`	`<html>`	Represents the root HTML element.
`Body`	`<body>`	Represents the body element of an HTML document.
`Head`	`<head>`	Represents a head element.
`Meta`	`<meta>`	Represents a meta element.
`Link`	`<link>`	Represents a link element (e.g., stylesheets).
`Style`	`<style>`	Represents a style element (content should be CSS text).
`Script`	`<script>`	Represents a script element.
`Title`	`<title>`	Creates a title element node for the document head title.
`Base`	`<base>`	Represents a base element (specifies the base URL/target).
`Noscript`	`<noscript>`	HTML to be inserted if scripting is turned off.
`Template`	`<template>`	Holds HTML that is not rendered immediately but can be instantiated later.

11. SVG Elements

Wrappers for standard SVG elements. Note that children are defined using function calls, not inline XML.

Component	SVG Tag	Description
`Svg`	`<svg>`	Represents an SVG container element.
`SvgPath`	`<path>`	Represents an SVG path element.
`SvgCircle`	`<circle>`	Represents an SVG circle element.
`SvgEllipse`	`<ellipse>`	Represents an SVG ellipse element.
`SvgLine`	`<line>`	Represents an SVG line element.
`SvgPolyline`	`<polyline>`	Represents an SVG polyline element.
`SvgPolygon`	`<polygon>`	Represents an SVG polygon element.
`SvgRect`	`<rect>`	Represents an SVG rectangle element.
`SvgUse`	`<use>`	Represents an SVG use element.
`SvgDefs`	`<defs>`	Represents an SVG definitions element.
`SvgLinearGradient`	`<linearGradient>`	Represents an SVG linear gradient element.
`SvgRadialGradient`	`<radialGradient>`	Represents an SVG radial gradient element.
`SvgStop`	`<stop>`	Represents an SVG gradient stop element.
`SvgSymbol`	`<symbol>`	Represents an SVG symbol element.
`SvgG`	`<g>`	Represents an SVG group element.
`SvgText`	`<text>`	Represents an SVG text element.
`SvgTspan`	`<tspan>`	Represents an SVG text span element.

12. Indicators & Metering

Components for progress and scalar measurements.

Component	HTML Tag	Description
`Progress`	`<progress>`	Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
`Meter`	`<meter>`	Represents either a scalar value within a known range or a fractional value.

On this page