Standalone semantic text exports: heading, text, code, blockquote
Engineering log
We split the theme surface from behavioral primitives and let the bundler drop anything a route does not render. The result is a faster first paint and a smaller critical path.
Treat tokens as data. Treat components as functions. Ship only the ones you call.
Excerpted from the 1.4 release notes. Full post at dryui.dev/changelog/1-4.
Copy this entrypoint first. It includes the imports required to get the component on screen.
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { Typography } from '@dryui/ui';
</script>
<Typography.Heading level={2}>Launch readiness</Typography.Heading>
<Typography.Text color="muted" size="sm">Use Typography.Text for supporting copy and metadata.</Typography.Text>Root package
import { Typography } from '@dryui/ui'Per-component subpath
import { Typography } from '@dryui/ui/typography'Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
Typography.Heading | |||||
| level | 123456 | Heading level used to render semantic h1 through h6 output. | — | — | — |
| variant | defaultdisplay variant='display' uses --dry-font-display, which defaults to --dry-font-sans. Override --dry-font-display on body or a scoped wrapper (not :root) for a distinct display typeface. | Visual style preset for the component. | — | — | — |
| maxMeasure | narrowdefaultwidefalse Caps the rendered inline size in ch units: narrow~22ch, default~45ch, wide~65ch. Use narrow for editorial hero headlines. | Caps rendered inline size on an ergonomic text measure (ch unit). Pass narrow, default, or wide, or false to opt out. | — | — | — |
| className | HTMLAttributes<HTMLHeadingElement>['class'] | — | — | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
Typography.Text | |||||
| as | pspandiv | Text element to render for inline, block, or paragraph copy. | — | — | — |
| size | xssmmdlg Applies DryUI text scale tokens for compact or emphasized body copy. | Size preset affecting density, spacing, or typography. | — | — | — |
| font | sansmono | — | — | — | — |
| weight | normalmediumsemiboldbold | — | — | — | — |
| maxMeasure | narrowdefaultwidefalse Caps the rendered inline size in ch units: narrow~48ch, default~65ch, wide~80ch. | Caps rendered inline size on an ergonomic text measure (ch unit). Pass narrow, default, or wide, or false to opt out. | — | — | — |
| children | Snippet | Content rendered inside the component. | — | — | — |
| color | defaultmutedsecondary Use muted or secondary for supporting copy without reaching for inline color styles. | Semantic color or tone applied to the component. | — | — | — |
| variant | defaultmutedsecondarylabel | Visual style preset for the component. | — | — | — |
Typography.Code | |||||
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
Typography.Blockquote | |||||
| children | Snippet | Content rendered inside the component. | — | ✓ | — |