OpenHands/openhands-ui/README.md

@openhands/ui

A modern React component library built with TypeScript and Tailwind CSS.

Installation

Choose your preferred package manager:

# npm
npm install @openhands/ui

# yarn
yarn add @openhands/ui

# pnpm
pnpm add @openhands/ui

# bun
bun add @openhands/ui

Quick Start

import { Button, Typography } from "@openhands/ui";
import "@openhands/ui/styles";

function App() {
  return (
    <div>
      <Typography.H1>Hello World</Typography.H1>
      <Button variant="primary">Get Started</Button>
    </div>
  );
}

Components

Component	Description
Button	Interactive button with multiple variants
Checkbox	Checkbox input with label support
Chip	Display tags or labels
Divider	Visual separator
Icon	Icon wrapper component
Input	Text input field
InteractiveChip	Clickable chip component
RadioGroup	Radio button group
RadioOption	Individual radio option
Scrollable	Scrollable container
Toggle	Toggle switch
Tooltip	Tooltip overlay
Typography	Text components (H1-H6, Text, Code)

Development

Use your preferred package manager to install dependencies and run the development server. We recommend using Bun for a fast development experience.

Note: If you plan to make dependency changes and submit a PR, you must use Bun during development.

# Install dependencies
bun install

# Start Storybook
bun run dev

# Build package
bun run build

Testing Locally Without Publishing

To test the package in another project without publishing to npm:

# Build the package:
bun run build

# Create a local package:
# This generates a `.tgz` file in the current directory.
bun pm pack

# Install in your target project:
# Replace `path/to/openhands-ui-x.x.x.tgz` with the actual path to the generated `.tgz` file.
npm install path/to/openhands-ui-x.x.x.tgz

Publishing

This package is automatically published to npm when a version bump is merged to the main branch. See PUBLISHING.md for detailed information about the publishing process.

License

MIT