ComponentsTypography
Typography
Style headings and body text with consistent sizes, weights, and colors.
On this page
Use this component from the local workspace package. Follow the setup guide first. A public npm package and registry are not available yet.
View registry filesImport the component into your page or component file.
import { Heading, Text, Typography } from "@dethink/components";Try the examples, then open the code to use them in your app.
Headings and body scale
level sets the semantic element; visualLevel sets the size — outline and appearance decouple cleanly.
Visual h1, semantic h2
Section heading
Large body text for standfirst paragraphs.
Default body text with a comfortable reading rhythm.
Small muted text for secondary detail.
Extra-small subtle text for fine print.
Show sourceexamples/typography/scale.tsx
"use client";
import { Heading, Text } from "@dethink/components";
export function TypographyScale() {
return (
<div className="mx-auto max-w-md space-y-3">
<Heading level={2} visualLevel={1}>
Visual h1, semantic h2
</Heading>
<Heading level={3}>Section heading</Heading>
<Text size="lg">Large body text for standfirst paragraphs.</Text>
<Text>Default body text with a comfortable reading rhythm.</Text>
<Text size="sm" tone="muted">
Small muted text for secondary detail.
</Text>
<Text size="xs" tone="subtle">
Extra-small subtle text for fine print.
</Text>
</div>
);
}Tones, variants, and truncation
Semantic tones from the token system, preset Typography variants, and single-line truncation.
Deployment summary
All 14 checks passed.
p99 latency is trending up.
2 regions failed to converge.
View the full report →
Updated 4 minutes ago · caption variant
Truncation keeps long single-line values tidy without layout breaks.
Show sourceexamples/typography/tones.tsx
"use client";
import { Text, Typography } from "@dethink/components";
export function TypographyTones() {
return (
<div className="mx-auto grid max-w-md gap-2">
<Typography variant="title">Deployment summary</Typography>
<Text tone="success">All 14 checks passed.</Text>
<Text tone="warning">p99 latency is trending up.</Text>
<Text tone="destructive">2 regions failed to converge.</Text>
<Text tone="primary" weight="medium">
View the full report →
</Text>
<Typography variant="caption" tone="muted">
Updated 4 minutes ago · caption variant
</Typography>
<Text truncate className="max-w-56">
Truncation keeps long single-line values tidy without layout breaks.
</Text>
</div>
);
}Examples that combine components for common tasks.
Article header
Kicker, headline, standfirst, byline, and a clamped lede — a complete editorial hierarchy from the semantic pieces, no ad hoc classes.
Engineering
Theming a component library with nothing but CSS variables
How the token contract keeps every component rebrandable — including this page's teal.
Every color, radius, font, and density value in Dethink Components is a CSS custom property. That single decision means a theme is data, not code: hand the provider a palette and the whole tree — buttons, calendars, data tables — re-skins itself with no forked styles and no specificity fights.
Show sourceexamples/typography/recipe-article.tsx
"use client";
import { Heading, Separator, Text } from "@dethink/components";
/**
* An article header and lede built from the semantic pieces: heading levels
* follow the outline while visualLevel controls the size, and tones carry
* the byline hierarchy without ad hoc classes.
*/
export function TypographyRecipeArticle() {
return (
<article className="mx-auto max-w-md">
<Text
size="xs"
tone="primary"
weight="medium"
className="tracking-wider uppercase"
>
Engineering
</Text>
<Heading level={3} visualLevel={2} className="mt-2">
Theming a component library with nothing but CSS variables
</Heading>
<Text tone="muted" size="sm" className="mt-2">
How the token contract keeps every component rebrandable — including
this page's teal.
</Text>
<div className="mt-3 flex items-center gap-2">
<Text as="span" size="sm" weight="medium">
Dana Okafor
</Text>
<Text as="span" size="sm" tone="subtle">
· Jul 4, 2026 · 8 min read
</Text>
</div>
<Separator spacing="4" />
<Text lineClamp={3} tone="muted">
Every color, radius, font, and density value in Dethink Components is a
CSS custom property. That single decision means a theme is data, not
code: hand the provider a palette and the whole tree — buttons,
calendars, data tables — re-skins itself with no forked styles and no
specificity fights.
</Text>
</article>
);
}All three render real text elements and accept native attributes.
| Prop | What it does | Default |
|---|---|---|
Heading — level1–6 | Semantic heading element in the document outline. | 2 |
Heading — visualLevel1–6 | Visual size independent of semantics — keep the outline correct while styling freely. | level |
Text — as"p" | "span" | "div" | "small" | "label" | "strong" | "em" | Element the text renders as (label supports htmlFor). | "p" |
Text — size"xs" | "sm" | "md" | "lg" | "xl" | Body text scale with matched line heights. | "md" |
tone"default" | "muted" | "subtle" | "primary" | "success" | "warning" | "destructive" | Semantic color drawn from the token system. | "default" |
weight / alignregular–bold / start–end/justify | Font weight and text alignment. | regular / inherit |
truncate / lineClampboolean / 1–6 | Single-line ellipsis or multi-line clamping. | Not set |
Typography — variant"display" | "heading" | "title" | "subtitle" | "body" | "caption" | "label" | Preset text styles on a polymorphic element for one-off needs outside Heading/Text. | "body" |