The agentic UI library for React.

Nucleux ships every pattern in this library as a real, installable React component. One umbrella package, ~50 focused sub-packages, Tailwind-native theming, TypeScript throughout — the same components the Meeting Summariser is built from.

Install

The umbrella package re-exports every component; you can also install any sub-package on its own.

# everything (recommended)

npm install @nucleux/react

# or just what you need

npm install @nucleux/message @nucleux/agent-composer @nucleux/button

# peer deps

npm install react react-dom

Set up theming

Components are styled with Tailwind utilities bound to design tokens in @nucleux/tokens. Add the preset, scan the compiled components, and import the token stylesheet.

// tailwind.config.js

import nucleux from '@nucleux/tokens/preset' export default { presets: [nucleux], content: [ './src/**/*.{js,jsx,ts,tsx}', './node_modules/@nucleux/**/dist/*.js', // generate component classes ], }

/* index.css */

@import '@nucleux/tokens/styles.css'; /* --nx-* tokens, light + .dark */ @tailwind components; @tailwind utilities;

Toggle dark mode with a .dark class on a parent element. Tokens cover colour, radius, and the nx-* keyframes (caret blink, typing dots, fade-in).

Quick start — an agent chat

A scrolling transcript with auto-pin, streamed assistant messages, and a composer that submits on Enter.

import { Thread, Message, AgentComposer, Badge } from '@nucleux/react' function Chat({ messages, input, setInput, onSend, busy }) { return ( <Thread autoScrollKey={messages.length}> {messages.map((m) => ( <Message key={m.id} role={m.role} content={m.text} streaming={m.streaming} /> ))} <AgentComposer value={input} onValueChange={setInput} onSubmit={onSend} loading={busy} placeholder="Ask anything…" /> </Thread> ) }

Packages

~50 sub-packages under the @nucleux/* scope. Import from the umbrella (@nucleux/react) or per-package. Every export is typed.

Agentic & chat

The building blocks for assistant UIs.

agent-composer input-bar message thread reasoning streaming-text typing-indicator tool-call suggestions follow-up

Actions & inputs

Buttons and form controls.

button icon-button link-button checkbox checklist radio-group rich-checkbox-group switch select search-input

Layout & navigation

Shells, surfaces, and overlays.

sidebar nav-panel global-nav right-sidebar page-header breadcrumb tabs separator card media-card sheet dialog popover menu

Feedback & status

Signals, badges, and progress.

alert toast badge chip progress avatar tooltip

Content & data

Rich content and structured display.

code-block table accordion action-tile getting-started-pill modular-consent related-patterns-grid

Foundations

Tokens, hooks, and utilities.

tokens tokens/preset tokens/styles.css hooks utils