Typography
Semantic heading, text, and inline code primitives keep content hierarchy token-driven.
Overview and decision boundary
Use Typography primitives to preserve semantic document structure and token-driven hierarchy.
Do not use Heading to style non-heading content or hard-code type values in product UI.
Preview
Workspace settings
Changes apply to every member.
Install with nerio add typography.
import { Code, Heading, Text } from '@nerio-ui/ui';<Heading as="h2" size="lg">Workspace settings</Heading><Text tone="secondary">Changes apply to every member.</Text><Code>nerio add typography</Code>Installation and imports
Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.
pnpm dlx nerio add typographyimport { Code, Heading, Text } from '@nerio-ui/ui';Usage
import { Code, Heading, Text } from '@nerio-ui/ui';<Heading as="h2" size="lg">Workspace settings</Heading><Text tone="secondary">Changes apply to every member.</Text><Code>nerio add typography</Code>Variants
| Variant | Purpose |
|---|---|
heading sizes | Heading sizes is part of the public component contract. |
text tones | Text tones is part of the public component contract. |
Anatomy
| Slot | Purpose |
|---|---|
heading | Semantic heading level with an independent visual size. |
text | Supporting copy with default, secondary, or tertiary tone. |
code | Short inline code token for commands, names, and values. |
States
| State | Purpose |
|---|---|
Default | Typography adapts through semantic text and font tokens. |
Motion
- State changes should use shared motion tokens and preserve reduced-motion behavior.
Accessibility
- Use Heading as the correct semantic level for the document outline, not merely for visual size.
- Use Text for supporting copy without replacing native labels or accessible names.
- Use Code only for short inline code; use pre and code for larger code blocks.
- Typography presets are scoped CSS token recipes; load Geist or Inter in the consuming product before applying their preset class.
API
| Prop | Purpose |
|---|---|
Heading as / size | Controls semantic heading level and visual size independently. |
Text tone | Controls the semantic color role for supporting copy. |
Code | Renders a short inline code element. |
Implementation contract
| Contract | Value |
|---|---|
Registry item | typography installs 5 source files into the configured components directory. |
Base UI | No interactive primitive required. |
Registry dependencies | None. |
Package dependencies | clsx, react, tailwind-merge, tailwindcss |
Styling contract
| Contract | Value |
|---|---|
Authoring | Complete, statically detectable Tailwind CSS v4 recipes own component visuals. |
Values | Semantic and component --n-* variables remain the canonical customization layer. |
Overrides | Customizable slots merge consumer className values with tailwindCn so conflicting utilities resolve deterministically. |
Residual CSS | Only shared keyframes and scoped no-Preflight compatibility rules remain; there is no parallel visual selector layer. |
Design notes
- Use Typography primitives to preserve semantic document structure and token-driven hierarchy.
Do / do not
Do
Use semantic HTML through the as prop and tokenized text roles.
Do not
Do not use Heading to style non-heading content or hard-code type values in product UI.
Related components
Tokens
These are the primary customization points. Override semantic or component tokens instead of changing component source.
| Token | Purpose |
|---|---|
--n-color-text-primary | Public customization point for this component contract. |
--n-color-text-secondary | Public customization point for this component contract. |
--n-color-text-tertiary | Public customization point for this component contract. |
--n-font-sans | Public customization point for this component contract. |
--n-font-mono | Public customization point for this component contract. |
--n-font-sans-system | Public customization point for this component contract. |
--n-font-sans-geist | Public customization point for this component contract. |
--n-font-sans-inter | Public customization point for this component contract. |
--n-font-sans-ibm-plex | Public customization point for this component contract. |
--n-font-sans-manrope | Public customization point for this component contract. |
--n-font-sans-source-sans | Public customization point for this component contract. |
--n-font-sans-space-grotesk | Public customization point for this component contract. |
--n-font-mono-system | Public customization point for this component contract. |
--n-font-mono-geist | Public customization point for this component contract. |
--n-font-mono-ibm-plex | Public customization point for this component contract. |
--n-line-height-tight | Public customization point for this component contract. |