Theme

Typography

display @dryui/ui Namespace

Standalone semantic text exports: heading, text, code, blockquote

textheadingtypographyprosestandalone

Start Here

Start from the smallest working snippet, then move to interactive examples and the full API contract below.

Styled quick start

Copy this entrypoint first. It includes the imports required to get the component on screen.

svelte
<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>

Import options

Root package

ts
import { Typography } from '@dryui/ui'

Per-component subpath

ts
import { Typography } from '@dryui/ui/typography'

Customize

Use the interactive examples to see common variants, states, and composition patterns before building your own.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

svelte
<script lang="ts">
  import { Typography } from '@dryui/ui';
</script>

<Typography.Heading level={1}>Heading 1</Typography.Heading>
<Typography.Heading level={2}>Heading 2</Typography.Heading>
<Typography.Heading level={3}>Heading 3</Typography.Heading>
<Typography.Heading level={4}>Heading 4</Typography.Heading>

Text

This is a paragraph of text demonstrating the Typography component.

svelte
<script lang="ts">
  import { Typography } from '@dryui/ui';
</script>

<Typography.Text color="secondary" size="lg">
  This is a paragraph of text demonstrating the Typography component.
</Typography.Text>

Code

const x = 42;
svelte
<script lang="ts">
  import { Typography } from '@dryui/ui';
</script>

<Typography.Code>const x = 42;</Typography.Code>

Blockquote

The best way to predict the future is to invent it. — Alan Kay
svelte
<script lang="ts">
  import { Typography } from '@dryui/ui';
</script>

<Typography.Blockquote>
  The best way to predict the future is to invent it. — Alan Kay
</Typography.Blockquote>

Structure

This component exposes its parts directly. Use the part component you need instead of wrapping everything in Typography.Root.

Typography is a namespaced set of standalone text parts. Use Typography.Heading or Typography.Text directly; there is no Typography.Root wrapper.

Typography.HeadingTypography.TextTypography.CodeTypography.Blockquote

Compose

The full API contract lives here: props, CSS variables, and the public data attributes you can target when styling.

Namespace parts are used directly. Add the specific part you need and skip a Typography.Root wrapper.

Typography is a namespaced set of standalone text parts. Use Typography.Heading or Typography.Text directly; there is no Typography.Root wrapper.

Typography.HeadingTypography.TextTypography.CodeTypography.Blockquote

Typography.Heading

Prop Type Default Required Bindable
level
123456
 — — —
children
Snippet
— ✓ —

Forwards <h*> attributes via rest props. Common examples: id, style, aria-label.

Typography.Text

Prop Type Default Required Bindable
as
pspandiv
 — — —
color
defaultmutedsecondary
Use muted or secondary for supporting copy without reaching for inline color styles.
 — — —
variant
defaultmutedsecondary
 — — —
size
smmdlg
Applies DryUI text scale tokens for compact or emphasized body copy.
 — — —
children
Snippet
— ✓ —

Forwards <element> attributes via rest props. Common examples: id, class, aria-label.

Typography.Code

Prop Type Default Required Bindable
children
Snippet
— ✓ —

Forwards <element> attributes via rest props. Common examples: id, class, aria-label.

Typography.Blockquote

Prop Type Default Required Bindable
children
Snippet
— ✓ —

Forwards <blockquote> attributes via rest props. Common examples: id, style, aria-label.