Build React UIs with Type-Safe Fluency Without JSX Syntax
A revolutionary approach to React component composition featuring function-based syntax, direct CSS-first prop styling, built-in theming system, smart prop handling with raw property pass-through, and enterprise-ready features powered by @emotion/react.
@meonode/ui is a modern React UI framework that eliminates the need for JSX while maintaining full React compatibility. It enables developers to build sophisticated user interfaces using pure function calls with type-safe property-based styling, powerful theming capabilities, and seamless CSS-in-JS integration.
The library transforms the traditional React development experience by providing:
@meonode/ui is built on the principle that UI development should be intuitive, type-safe, and performant. By leveraging function-based composition, developers can create complex interfaces without the cognitive overhead of JSX while maintaining the full power and flexibility of React.
const Card = ({ title, children }) => ( <div style={{ padding: '20px', borderRadius: '12px', backgroundColor: theme.colors.primary }}> <h2 style={{ fontSize: '1.5rem', marginBottom: '8px' }}> {title} </h2> {children} </div> );
const Card = Component<{ title: string }>(({ title, children }) => Div({ padding: '20px', borderRadius: '12px', backgroundColor: 'theme.colors.primary', children: [ H2(title, { fontSize: '1.5rem', marginBottom: '8px' }), ...children ] }) );
Write UI with plain JavaScript functions — no build transforms or syntax hacks.
Static typing for layouts, props, and structure. Safer refactors, better DX.
Build UIs as function trees — easily reusable, abstractable, and intuitive.
Define visual styles like `padding`, `gap`, or `color` directly through intuitive props.
Leverages the power of Emotion for fast, flexible, and dynamic styling in React apps.
Style with your own semantic tokens like `#000000` or `1rem`. Define your theme object — MeoNode integrates it seamlessly.
MeoNode UI is designed exclusively for React — ensuring seamless integration in tools like Vite, Next.js, and more.
import { Component, Root, Center, Column, H1, Button, Text } from '@meonode/ui'; const theme = { primary: { default: '#FF6B6B', content: '#4A0000' }, secondary: { default: '#6BCB77', content: '#0A3B0F' }, base: { default: '#F8F8F8', content: '#333333' } }; const App = Component(() => Root({ theme, backgroundColor: '#fff7ed', children: Center({ padding: 40, children: Column({ gap: 24, textAlign: 'center', children: [ H1('Welcome to MeoNode', { fontSize: '3rem', color: '#000000', marginBottom: 16 }), Text('Build React UIs with Type-Safe Fluency', { fontSize: '1.2rem', color: '#7a3205', marginBottom: 24 }), Button('Get Started', { backgroundColor: '#000000', color: '#ffffff', padding: '12px 24px', borderRadius: 8, fontSize: '1.1rem', cursor: 'pointer', onClick: () => alert('Hello MeoNode!') }) ] }) }) }) );
Powered by @emotion/react under the hood, providing robust CSS-in-JS capabilities with automatic optimization, vendor prefixing, and critical CSS extraction for server-side rendering.
Advanced theme path resolution system that automatically converts string paths like 'theme.colors.primary.500' into actual theme values at runtime, enabling powerful design system integration.
Flexible component creation through the Node factory, Component wrapper, and pre-built semantic elements, allowing for both quick prototyping and sophisticated component architectures.
Built-in portal system for creating modals, tooltips, and overlays with full context provider integration, enabling complex UI patterns while maintaining clean component hierarchies.
Ready to revolutionize your React development experience?
@meonode/ui using Yarn or npm.@meonode/ui.css prop, pseudo-classes, media queries, and animations.@meonode/ui with frameworks like Next.js, Vite, etc.