For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/en/components/typography.md.
Leaf UIReact components
GitHub

Typography

Organize headings, body text and links.

Basic usage

Project notes

Organize headings, body text and links with a consistent reading rhythm.

Updated today · Read the API
basic.tsx
import { Link, Paragraph, Text, Title, Typography } from '@ifhover/leaf-ui';

export function TypographyBasic() {
  return (
    <Typography>
      <Title level={3}>{'Project notes'}</Title>
      <Paragraph>
        {'Organize headings, body text and links with a consistent reading rhythm.'}
      </Paragraph>
      <Text tone="muted">{'Updated today'}</Text>
      {' · '}
      <Link href="#typography-api">{'Read the API'}</Link>
    </Typography>
  );
}

Copy and edit

Leaf workspace

A workspace helps the team organize projects and share useful information. Keep the most important content visible, then expand the paragraph when more detail is needed.

basic.tsx
import { Paragraph, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function TypographyActions() {
  const [text, setText] = useState('Leaf workspace');
  return (
    <div style={{ display: 'grid', gap: 16 }}>
      <Text copyable editable={{ onChange: setText }}>
        {text}
      </Text>
      <Paragraph ellipsis={{ rows: 2, expandable: true }} style={{ maxWidth: 320 }}>
        {'A workspace helps the team organize projects and share useful information. Keep the most important content visible, then expand the paragraph when more detail is needed.'}
      </Paragraph>
    </div>
  );
}

Typography API

PropertyTypeDefaultDescription
compactboolean—Use tighter paragraph spacing.

Text API

PropertyTypeDefaultDescription
tone'default' | 'muted' | 'primary' | 'success' | 'warning' | 'danger''default'Semantic text tone.
strongboolean—Use bold text.
italicboolean—Use italic text.
underlineboolean—Show an underline.
codeboolean—Display as inline code.
markboolean—Highlight text.
ellipsisboolean | { rows?: number; expandable?: boolean }—Truncate one or more lines, optionally with an expand action.
copyableboolean | { text?: string; onCopy?: (text: string) => void; onError?: (error: unknown) => void }—Provide a copy action with optional content and callbacks.
editable{ onChange: (text: string) => void; text?: string }—Provide editing; update the text after onChange.

Paragraph API

PropertyTypeDefaultDescription
tone'default' | 'muted' | 'primary' | 'success' | 'warning' | 'danger''default'Semantic text tone.
strongboolean—Use bold text.
italicboolean—Use italic text.
underlineboolean—Show an underline.
codeboolean—Display as inline code.
markboolean—Highlight text.
ellipsisboolean | { rows?: number; expandable?: boolean }—Truncate one or more lines, optionally with an expand action.
copyableboolean | { text?: string; onCopy?: (text: string) => void; onError?: (error: unknown) => void }—Provide a copy action with optional content and callbacks.
editable{ onChange: (text: string) => void; text?: string }—Provide editing; update the text after onChange.

Title API

PropertyTypeDefaultDescription
level1 | 2 | 3 | 4 | 5 | 62Heading level, rendering h1–h6.
PropertyTypeDefaultDescription
disabledboolean—Disable interaction.
underlinebooleantrueShow an underline.
externalboolean—Open in a new tab with a safe rel attribute.
iconReactNode—Icon content.

Types and interaction

Import the props and data types when creating reusable configuration.

import type { TypographyProps, TextProps, ParagraphProps, TitleProps, LinkProps } from '@ifhover/leaf-ui';

Provide accessible labels for icon-only actions. Interactive controls support keyboard navigation and respect ConfigProvider themes and reduced motion.