Complete typography system for React and Next.js. Type scales, font loading, zero layout shift, and beautiful text rendering out of the box.
npm install @textnode/textnodeComplete typography system for React and Next.js. Type scales, font loading, zero layout shift, and beautiful text rendering out of the box.
``bash`
npm install @textnode/textnodeor
pnpm add @textnode/textnodeor
yarn add @textnode/textnode
`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 (
Zero layout shift, perfect font loading.
);
}
`
- 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 supportas
- Polymorphic - Render as any HTML element with the prop
- Variants - Pre-configured text styles for consistency
- CSS Variables - All values available as CSS custom properties
This is the unified package that includes:
- @textnode/core - Core typography engine
- @textnode/react - React components and hooks
- @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
`tsx`
const config = createTypographyConfig({
scale: {
type: 'modular',
base: 16,
ratio: 1.25, // Major third
},
});
`tsx`
const config = createTypographyConfig({
scale: {
type: 'fixed',
values: {
xs: 12,
sm: 14,
base: 16,
lg: 18,
xl: 20,
'2xl': 24,
'3xl': 30,
'4xl': 36,
},
},
});
`tsx`
const config = createTypographyConfig({
scale: {
type: 'fluid',
minViewport: 320,
maxViewport: 1200,
minBase: 14,
maxBase: 18,
ratio: 1.25,
},
});
`tsx`
`tsx`
`tsx
import { useFontStatus } from 'textnode';
function MyComponent() {
const { isLoaded, isLoading, error } = useFontStatus('Inter');
if (isLoading) return
return
$3
`tsx
import { useTypography } from 'textnode';function MyComponent() {
const { config, scale, fonts } = useTypography();
return
Base size: {scale.base}px;
}
`CSS Variables
All typography values are available as CSS custom properties:
`css
.custom-text {
font-size: var(--textnode-font-size-lg);
line-height: var(--textnode-line-height-lg);
font-family: var(--textnode-font-sans);
}
``- Full Documentation
- API Reference
- React Components
MIT