react-ui

@openuidev/react-ui

React UI components, chat layouts, and component libraries for OpenUI. Drop-in chat surfaces with theming, or use individual components in your own layout.

Install

npm install @openuidev/react-ui @openuidev/react-lang @openuidev/react-headless
# or
pnpm add @openuidev/react-ui @openuidev/react-lang @openuidev/react-headless

Peer dependencies: react >=19.0.0, react-dom >=19.0.0, zustand ^4.5.5, @openuidev/react-lang, @openuidev/react-headless

Don't forget to import the component styles:

import "@openuidev/react-ui/components.css";

Overview

This package provides three layers:

1. Chat layouts — Ready-to-use chat surfaces (FullScreen, Copilot, BottomTray) that wire up the provider, streaming, and rendering automatically.
2. Component library — A built-in set of UI components (charts, tables, forms, cards, etc.) that models can generate via OpenUI Lang.
3. Individual components — Use Button, Card, Table, Charts, and 30+ components directly in your own UI.

Quick Start

The fastest way to get a working chat app:

import { FullScreen } from "@openuidev/react-ui";
import "@openuidev/react-ui/components.css";

function App() {
  return (
    <FullScreen
      apiUrl="/api/chat"
      threadApiUrl="/api/threads"
    />
  );
}

Chat Layouts

Component	Description
FullScreen	Full-page chat with a thread sidebar
Copilot	Side-panel copilot overlay
BottomTray	Collapsible bottom tray chat

All chat layouts accept apiUrl, threadApiUrl, and theming props. See the chat docs for full configuration.

Copilot example

import { Copilot } from "@openuidev/react-ui";

function App() {
  return (
    <div>
      <main>Your app content</main>
      <Copilot apiUrl="/api/chat" threadApiUrl="/api/threads" />
    </div>
  );
}

Built-in Component Libraries

The package ships with two preconfigured OpenUI Lang libraries:

Export	Description
openuiLibrary	Full component library — charts, tables, forms, cards, images, and more
openuiChatLibrary	Chat-optimized subset with follow-ups, steps, and callouts

Use them directly when building custom chat experiences:

import { Renderer } from "@openuidev/react-lang";
import { openuiLibrary } from "@openuidev/react-ui";

function AssistantMessage({ content, isStreaming }) {
  return (
    <Renderer
      response={content}
      library={openuiLibrary}
      isStreaming={isStreaming}
    />
  );
}

Generate a system prompt from the library:

import { openuiLibrary, openuiPromptOptions } from "@openuidev/react-ui";

const systemPrompt = openuiLibrary.prompt(openuiPromptOptions);

Theming

Wrap your app in ThemeProvider to customize colors, typography, spacing, and effects:

import { ThemeProvider, createTheme } from "@openuidev/react-ui";

const customTheme = createTheme({
  primary: "#6366f1",
  background: "#fafafa",
  foreground: "#1a1a1a",
});

function App() {
  return (
    <ThemeProvider mode="light" lightTheme={customTheme}>
      <YourApp />
    </ThemeProvider>
  );
}

Export	Description
ThemeProvider	Context provider for theming
createTheme(overrides)	Create a theme with validation and defaults
defaultLightTheme	Built-in light theme
defaultDarkTheme	Built-in dark theme
swatchTokens	Token palette for use in theme builders

Components

All components are available as individual imports:

Category	Components
Layout	Card, CardHeader, SectionBlock, Tabs, Accordion, Carousel, Separator, Steps
Data Display	Table, Charts (bar, line, area, pie, radar, scatter), ListBlock, ListItem, Tag, TagBlock, CodeBlock, Image, ImageBlock, ImageGallery
Forms	Input, TextArea, Select, CheckBoxGroup, CheckBoxItem, RadioGroup, RadioItem, SwitchGroup, SwitchItem, Slider, DatePicker, FormControl, Label
Actions	Button, Buttons, IconButton, FollowUpBlock, FollowUpItem
Feedback	Callout, TextCallout, MessageLoading
Content	TextContent, MarkDownRenderer
Chat	FullScreen, Copilot, BottomTray, Shell.*, CopilotShell.*, ToolCall, ToolResult

Per-component imports

For smaller bundles, import components individually:

import { Button } from "@openuidev/react-ui/Button";
import { Card } from "@openuidev/react-ui/Card";
import { Charts } from "@openuidev/react-ui/Charts";

Subpath Exports

Import path	Description
@openuidev/react-ui	All components and libraries
@openuidev/react-ui/components.css	Compiled component styles
@openuidev/react-ui/genui-lib	OpenUI Lang libraries and prompt options
@openuidev/react-ui/tailwind	Tailwind CSS plugin
@openuidev/react-ui/styles/*	SCSS utilities
@openuidev/react-ui/scssUtils	SCSS utility functions
@openuidev/react-ui/<Component>	Per-component entry points

Documentation

Full documentation, component guides, and live examples are available at openui.com.

License

MIT