ComponentsTypography
Typography
Style headings and body text with consistent sizes, weights, and colors.
On this page
Install component source from the public registry, or use the local workspace package. Follow the setup guide first. The npm package is not published yet.
View registry filesImplemented with React and browser APIs, without an additional behavior or rendering library.
Shared foundation: React, clsx for conditional classes, tailwind-merge for resolving utility-class conflicts. Styles use Tailwind CSS and Dethink CSS variables.
Based on this component’s source and registry composition. Libraries used only in showcase examples are excluded.
Import 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" |