Implementation:OpenHands OpenHands Typography

Knowledge Sources	OpenHands
Domains	UI_Components, React
Last Updated	2026-02-11 21:00 GMT

Overview

A collection of pre-configured typography components (H1-H6, Text, Code) exported as properties of a single Typography object.

Description

The Typography module exports an object containing pre-configured React components for consistent text rendering across the application. The available components are Typography.H1 through Typography.H6 for headings, Typography.Text for body copy, and Typography.Code for inline code snippets. Each component applies standardized font sizes, weights, line heights, and colors from the design system. The source file is 92 lines long.

Usage

Use the Typography components whenever rendering text content to ensure visual consistency with the design system. Use heading components (H1-H6) for section titles, Text for paragraphs and body content, and Code for inline code references.

Code Reference

Source Location

openhands-ui/components/typography/Typography.tsx (92 lines)

Signature

const Typography: {
  H1: React.FC<TypographyProps>;
  H2: React.FC<TypographyProps>;
  H3: React.FC<TypographyProps>;
  H4: React.FC<TypographyProps>;
  H5: React.FC<TypographyProps>;
  H6: React.FC<TypographyProps>;
  Text: React.FC<TypographyProps>;
  Code: React.FC<TypographyProps>;
};

interface TypographyProps {
  children: React.ReactNode;
  className?: string;
}

Import

import { Typography } from "@openhands/ui";

I/O Contract

Inputs (Props)

Each Typography sub-component accepts the following props:

Prop	Type	Required	Default	Description
`children`	`React.ReactNode`	Yes	—	The text or content to render.
`className`	`string`	No	—	Optional CSS class name for custom styling overrides.

Outputs

Each sub-component renders the appropriate semantic HTML element (<h1> through <h6>, <p>, or <code>) with pre-configured typography styles from the design system.

Usage Examples

import { Typography } from "@openhands/ui";

function ArticlePage() {
  return (
    <article>
      <Typography.H1>Getting Started with OpenHands</Typography.H1>
      <Typography.Text>
        OpenHands is an open-source platform for AI-assisted software development.
      </Typography.Text>
      <Typography.H2>Installation</Typography.H2>
      <Typography.Text>
        Install the package using <Typography.Code>npm install @openhands/ui</Typography.Code>.
      </Typography.Text>
      <Typography.H3>Configuration</Typography.H3>
      <Typography.Text>
        Create a configuration file at the root of your project.
      </Typography.Text>
    </article>
  );
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment