@nrbx/react

React 19 bindings for Roblox TypeScript, with Tailwind-style className, HTML elements, and text-as-children.

Installation

npm install @nrbx/react @nrbx/react-roblox

Quick Start

import React, { useState } from "@nrbx/react";
import { createRoot } from "@nrbx/react-roblox";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <textbutton
      Text={`Count: ${count}`}
      Size={new UDim2(0, 120, 0, 50)}
      Event={{ Activated: () => setCount(count + 1) }}
    />
  );
}

const root = createRoot(container);
root.render(<Counter />);

Features

• All core and React 19 hooks, available on the default export or as named imports
• Text as children: string and number children become TextLabel instances automatically
• Tailwind-style className utilities (flex, items-center, bg-blue-500, w-32, ...)
• HTML element aliases (div, span, h1-h6, p, a, button, img, ...)
• Class components, error boundaries, portals, and a configurable styling system via defineConfig()

See the wiki for full documentation.

Built with roblox-ts - React Lua