grasscnGitHub

Typography

Semantic HTML with Minecraft bitmap text, wrapping and shadows.

Preview

A new adventure

Hello world Welcome to your world

/gamemode creative
Loading example...
To run this copied example, install these items using the linked CLI or manual instructions:

Usage

Typography is the MinecraftProse alias: as="span", scale=2, align="left" by default. Semantic H1-H4/P/Blockquote/InlineCode/Lead/Large/Small/Muted wrappers preserve HTML meaning without inventing larger native heading glyphs. maxWidth is measured in logical pixels; scalar text gets measured wrapping, while rich React children have separate composition behavior.

Composition

TypographyList and TypographyTable provide raw semantic containers; supply real list items, headings and cells. Use TypographyInlineCode inside prose and the installable Code Block for multiline source. Rich links remain responsible for their own focus affordance and accessible destination.

Installation

Loading registry address

Component source

This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.

Component implementationcomponents/ui/typography.tsx · tsx
"use client";

import * as React from "react";

import { MinecraftProse } from "./minecraft-prose";
import type { MinecraftProseProps } from "./minecraft-prose";
import { minecraftClasses as cn } from "./minecraft-render";

import "./minecraft-typography.css";

type TypographyProps = MinecraftProseProps;

Interactive playground

HEADING

A new adventure

Craft your story

MULTILINE

Hello 世界 Welcome to your world

PROSE / CODE
The world is yours.
/gamemode creativeSmall text and captions