Text

Use typography primitives to express semantic text hierarchy without hard-coded CSS.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: typography

Preview + Code

Typography Preview

Readable hierarchy and spacing.

Code

ArcaneBox(
  style: const ArcaneStyleData(
    display: Display.flex,
    flexDirection: FlexDirection.column,
    gap: Gap.sm,
  ),
  children: const [
    Text.heading2('Typography Preview'),
    Text.body('Readable hierarchy and spacing.'),
  ],
)

Text#

Use typography primitives to express semantic text hierarchy without hard-coded CSS.

The live preview and code sample above use the neutral package:arcane_jaspr/arcane_jaspr.dart API. The selected stylesheet owns spacing, density, radius, color, and interaction styling, so the same app code can render differently under Shadcn or Neon.

Source: lib/component/typography/text.dart

See the Component Catalog for the full exported surface and source mapping.

Text

Use typography primitives to express semantic text hierarchy without hard-coded CSS.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: typography

Preview + Code

Typography Preview

Readable hierarchy and spacing.

Code

ArcaneBox(
  style: const ArcaneStyleData(
    display: Display.flex,
    flexDirection: FlexDirection.column,
    gap: Gap.sm,
  ),
  children: const [
    Text.heading2('Typography Preview'),
    Text.body('Readable hierarchy and spacing.'),
  ],
)

Text#

Use typography primitives to express semantic text hierarchy without hard-coded CSS.

The live preview and code sample above use the neutral package:arcane_jaspr/arcane_jaspr.dart API. The selected stylesheet owns spacing, density, radius, color, and interaction styling, so the same app code can render differently under Shadcn or Neon.

Source: lib/component/typography/text.dart

See the Component Catalog for the full exported surface and source mapping.

Text

Use typography primitives to express semantic text hierarchy without hard-coded CSS.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: typography

Preview + Code

Typography Preview

Readable hierarchy and spacing.

Code

ArcaneBox(
  style: const ArcaneStyleData(
    display: Display.flex,
    flexDirection: FlexDirection.column,
    gap: Gap.sm,
  ),
  children: const [
    Text.heading2('Typography Preview'),
    Text.body('Readable hierarchy and spacing.'),
  ],
)

Text#

Use typography primitives to express semantic text hierarchy without hard-coded CSS.

The live preview and code sample above use the neutral package:arcane_jaspr/arcane_jaspr.dart API. The selected stylesheet owns spacing, density, radius, color, and interaction styling, so the same app code can render differently under Shadcn or Neon.

Source: lib/component/typography/text.dart

See the Component Catalog for the full exported surface and source mapping.