Installation — MeoNode UI

Get @meonode/ui up and running in your React project. This guide covers installation, setup, and your first component.

---

Prerequisites

• Node.js LTS
• npm or Yarn (latest stable)
• React 19.2 or higher
• TypeScript (recommended for type-safe development)

While @meonode/ui supports JavaScript, TypeScript is strongly recommended for full autocomplete and type safety.

Installation

Install @meonode/ui with your preferred package manager:

npm

npm install @meonode/ui react react-dom @emotion/react @emotion/cache

Yarn

yarn add @meonode/ui react react-dom @emotion/react @emotion/cache

This installs the core library along with its peer dependencies. @meonode/ui requires react and react-dom at 19.2 or later, and @emotion/react and @emotion/cache at 11.14 or later — all four are declared peers, so npm 7+ and Yarn will install them for you, but naming them keeps the versions under your control.

Use @meonode/ui 3.x; versions before 3.0.0 are deprecated on npm and no longer maintained. 3.1.0 is deprecated too: in server components it drops or breaks a css key whose at-rule condition or selector uses a theme token, which 3.1.1 fixed. @meonode/mui follows the same line — use 3.x.

Optional: the build-time compiler

@meonode/compiler is a separate dev dependency that precomputes prop classification and theme.* resolution at build time, and marks generated children so React can report an unkeyed list. Rendering is identical without it. See the compiler guide for setup and runtime version requirements.

npm install --save-dev @meonode/compiler

Your First Component

Create a simple UI to verify your setup:

Example: src/App.ts

import { Div, H1, Button } from '@meonode/ui'
import { useEffect } from 'react'

const App = () => {
  useEffect(() => {
    console.log('App mounted')
  }, [])

  return Div({
    padding: '40px',
    backgroundColor: 'whitesmoke',
    minHeight: '100dvh',
    minWidth: '100dvw',
    children: [
      H1('Hello, MeoNode!', {
        fontSize: '2.5rem',
        color: 'rebeccapurple',
        marginBottom: '20px',
      }),
      Button('Click Me', {
        padding: '12px 24px',
        backgroundColor: 'dodgerblue',
        color: 'white',
        borderRadius: '8px',
        cursor: 'pointer',
        onClick: () => alert('MeoNode is awesome!'),
      }),
    ],
  }).render()
}

export default App

---

Mounting It

App above is a function returning a React element, not a node. Because it uses hooks, reach it through Node() so React sees a real component boundary, then hand that to render() from @meonode/ui/client:

Example: src/index.ts

import { StrictMode } from 'react'
import { Node } from '@meonode/ui'
import { render } from '@meonode/ui/client'
import App from '@src/App'

render(Node(StrictMode, { children: Node(App) }), document.getElementById('root')!)

Node(StrictMode, { children: … }) Creates a MeoNode wrapper around React's StrictMode. The children prop embeds your app component tree.

render(node, element) Mounts the node tree to the specified DOM element. This replaces ReactDOM.createRoot() and handles the rendering lifecycle.

Run your dev server — you should see a purple heading and a blue button. Click it to confirm event handlers work.

---

Growing the Entry Point

A real app puts providers, theming and routing above the tree, and once there is more than one page a router takes the place of the single App. The shape does not change — render() still takes one node and one element — there is just more inside it. None of this is needed to get the page above rendering.

Example: src/index.ts

import { StrictMode } from 'react'
import { Node } from '@meonode/ui'
import { render } from '@meonode/ui/client'
import { Wrapper } from '@src/components/Wrapper'
import Routes from '@src/routes'
import '@src/assets/global.css'

// Providers, theming and routing compose above your pages
const root = Node(StrictMode, {
  children: Wrapper({ children: Routes() }),
})

render(root, document.getElementById('root')!)

---

Related FAQ

How do I install and set up MeoNode UI?

Use your package manager to install @meonode/ui with react and react-dom, then mount your app using render() from @meonode/ui/client.

How do I get started quickly?

After install, build one simple page with Div, Text, and Button to verify rendering, then move to the Usage and Styling guides.

What is MeoNode UI?

MeoNode UI is a type-safe React UI library that replaces JSX with function-based composition while staying compatible with regular React components and tooling.

More details: /docs/getting-started/faq

---

Next Steps

With @meonode/ui installed, explore these guides to build production UIs:

• Usage — Core patterns, component composition, children handling
• Styling — CSS prop, pseudo-classes, media queries, animations
• Theming — Design system setup, semantic tokens, context-based themes
• Framework Integration — Next.js and Vite setup, including SSR and the build-time compiler
• FAQ — Common patterns, troubleshooting, migration strategies
• Release Notes — Changelog, breaking changes, upgrade guides