orn-ui
← All components
Atom

Typography

Four text styles, one file, one install. Title, Subtitle, Body and Caption all come from the same Text.tsx and ship together — installing one gets you all four.

Requires <UIProvider> — Getting Started →

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add title

Or install the whole package and import it

pnpm add orn-ui
import { Title, Subtitle, Body, Caption } from 'orn-ui/title';

Installing copies the whole file, but you only import and render what you actually use — you do not need all four.

Depends on:core (theme + icons)

Usage

  • Title — Page and section headings — the largest, boldest style. One or two per screen, not more.
  • Subtitle — Secondary heading, right below a Title, or standalone for a lighter section header.
  • Body — The default paragraph style — most of the text on a screen should be Body.
  • Caption — Small print: secondary hints, metadata, timestamps, helper text under a field.
Demo clip not recorded yet — see MEDIA.md

Example — used together

<Title>Invoice #1042</Title>
<Subtitle>Due in 5 days</Subtitle>
<Body>Body text, the default paragraph style for most content.</Body>
<Caption>Caption, used for secondary hints and metadata.</Caption>

Variants

Title

<Title>Invoice #1042</Title>

Subtitle

<Subtitle>Due in 5 days</Subtitle>

Body

<Body>Body text, the default paragraph style for most content.</Body>

Caption

<Caption>Caption, used for secondary hints and metadata.</Caption>

align="center"

<Body align="center">Centered text</Body>

custom color

<Body color="#00cae1">Text with an explicit color override</Body>

Props

Same props for Title, Subtitle, Body and Caption — all four share the same TypographyProps.

NameTypeDefaultDescription
style?StyleProp<TextStyle>——
color?string——
align?'left' | 'center' | 'right'——
PreviousTransitionNextAvatarHeader