Typeset

Typeset is not a component. It is a global content styling layer for rendered HTML, markdown, CMS content, docs pages, and streaming text. Nusa UI follows the current shadcn Typeset direction: use a typeset container, tune it with small preset classes, and keep UI components outside the prose styling when needed.

The implementation lives in src/app/globals.css together with the Tailwind v4 theme tokens. It uses INA Digital typography values for Inter, headings, body copy, captions, line-height, and display tracking.

Usage

Wrap rendered content with typeset and the preset that matches the surface.

Copy<article className="typeset typeset-docs max-w-[60ch]">
  <h1>Standar Layanan</h1>
  <p>
    Konten markdown atau HTML hasil render akan mengikuti rhythm Typeset dan
    token typography Nusa UI.
  </p>
</article>

Use typeset-scroll around wide tables.

Copy<div className="typeset typeset-docs">
  <div className="typeset-scroll">
    <table>{/* wide table */}</table>
  </div>
</div>

Presets

The core rhythm controls are:

Typography Tokens

Nusa UI exposes INA Digital typography values as Tailwind utilities for product UI and custom layouts.

Display tokens use -0.02em letter spacing. Heading and body tokens use the Inter font family already loaded by the app.

Opt Out

Typeset styles only apply inside a typeset container. If a component is rendered inside that container and should keep its own component styling, add not-typeset or data-not-typeset.

Copy<article className="typeset typeset-docs">
  <p>Styled content.</p>
  <Card className="not-typeset">Component stays untouched.</Card>
</article>

Writing Guidelines

Use Title Case for page titles, product names, and major headings. Use Sentence case for buttons, form labels, helper text, and body copy. Use All Caps only for short labels, acronyms, identifiers, and codes.

Typeset does not own the measure. Keep long-form content around 50-60 characters per line from the layout with utilities like max-w-[60ch].