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

Yarn

yarn add @meonode/ui react react-dom

This installs the core library along with React peer dependencies.

Application Setup

Configure your application entry point to use MeoNode's rendering system. The render() function from @meonode/ui/client mounts your component tree to the DOM.

Example: src/index.ts

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

// Compose your app with context providers, theming, routing
const App = Node(StrictMode, {
  children: Wrapper({ children: Routes() }),
})

// Mount to DOM
render(App, document.getElementById('root')!)

How It Works

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

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

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

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

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, Vite, Remix configuration
• FAQ — Common patterns, troubleshooting, migration strategies
• Release Notes — Changelog, breaking changes, upgrade guides