Implementation:OpenHands OpenHands Typography
| Knowledge Sources | |
|---|---|
| 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>
);
}