@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