@textnode/textnode

Complete typography system for React and Next.js. Type scales, font loading, zero layout shift, and beautiful text rendering out of the box.

Installation

``bash
npm install @textnode/textnode


or

`tsx
import { createTypographyConfig, TypographyProvider, Text, Heading } from '@textnode/textnode';

// Create your typography configuration
const config = createTypographyConfig({
fonts: {
sans: {
family: 'Inter',
fallbacks: ['system-ui', 'sans-serif'],
weights: [400, 500, 600, 700],
},
mono: {
family: 'JetBrains Mono',
fallbacks: ['monospace'],
},
},
scale: {
type: 'modular',
base: 16,
ratio: 1.25, // Major third
},
});

function App() {
return (

Welcome to textnode
Beautiful typography made easy.

Zero layout shift, perfect font loading.


);
}
`

Features

- Type Scales - Modular, fixed, or fluid scales with mathematical precision
- Zero Layout Shift - Automatic fallback font metrics prevent CLS
- Font Loading - Smart font loading with status tracking
- React Components - and with full TypeScript support
- Polymorphic - Render as any HTML element with the as prop
- Variants - Pre-configured text styles for consistency
- CSS Variables - All values available as CSS custom properties

Packages

This is the unified package that includes:

- @textnode/core - Core typography engine
- @textnode/react - React components and hooks

$3

- @textnode/nextjs - Next.js integration with App Router support
- @textnode/cli - CLI for analyzing fonts and exporting tokens
- @textnode/dev - Development tools and debug panel

Type Scales

$3

`tsx
const config = createTypographyConfig({
scale: {
type: 'modular',
base: 16,
ratio: 1.25, // Major third
},
});
`

$3

`tsx
const config = createTypographyConfig({
scale: {
type: 'fixed',
values: {
xs: 12,
sm: 14,
base: 16,
lg: 18,
xl: 20,
'2xl': 24,
'3xl': 30,
'4xl': 36,
},
},
});
`

$3

`tsx
const config = createTypographyConfig({
scale: {
type: 'fluid',
minViewport: 320,
maxViewport: 1200,
minBase: 14,
maxBase: 18,
ratio: 1.25,
},
});
`

Components

$3

`tsx
Default paragraph text
Large text
Bold text
Muted text
Inline text
Monospace text
`

$3

`tsx
Page Title (h1)
Section Title (h2)
Subsection (h3)
Styled as h1, rendered as div
`

Hooks

$3

`tsx
import { useFontStatus } from 'textnode';

function MyComponent() {
const { isLoaded, isLoading, error } = useFontStatus('Inter');

if (isLoading) return

`tsx
import { useTypography } from 'textnode';

function MyComponent() {
const { config, scale, fonts } = useTypography();

return

`css
.custom-text {
font-size: var(--textnode-font-size-lg);
line-height: var(--textnode-line-height-lg);
font-family: var(--textnode-font-sans);
}
``

Documentation

- Full Documentation
- API Reference
- React Components

License

MIT